<!-- 管理活动-详情 -->
<template>
  <view class="classdetail"
        v-if="Object.keys(detailData).length>0">
    <view v-if="!showTab">
			<xjx-back :homeShow="true" :backShow="backBtnShow"></xjx-back>
    </view>
    <view :class="showTab?'transi show':'transi'">
      <uni-nav-bar fixed
                   status-bar
                   title="活动详情">
        <view slot="left"
              class="fanhui">
          <xjx-back :homeShow="true" :backShow="backBtnShow"></xjx-back>
        </view>
      </uni-nav-bar>
      <view class="tab_wrap"
            :style="{top:topHeight+'rpx'}">
        <van-tabs :active="showActive"
                  sticky
                  color="#2E88FF"
                  line-width="25%"
                  v-if="showTab"
                  @click="changeTab">
          <van-tab title="活动信息"
                   name="0"></van-tab>
          <van-tab title="购买须知"
                   name="1"></van-tab>
          <van-tab title="注意事项"
                   name="2"></van-tab>
          <van-tab v-if="listdata.length>0"
                   title="其他活动"
                   name="3"></van-tab>
        </van-tabs>
      </view>
    </view>
    <!-- 轮播 -->
    <view class="headimg">
      <swiper autoplay
              :indicator-dots="detailData.actImgList.length>1"
              indicator-color="rgba(255,255,255,0.3)"
              indicator-active-color="#fff"
              class="swiper_wrap">
        <swiper-item v-for="(item,index) in detailData.actImgList"
                     @click="showImg(index)"
                     :key="index">
          <image :src="item.fullImgUrl"
                 mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>
    <view class="paytime">
      <view v-if="paystart"
            class="paystart">
        <view class="classPrice">
          <!--	<view class="ys">¥</view>
					<view class="yb">{{detailData.cost}}</view>-->
        </view>
        <view class="r">
          <text>距开始抢购还有</text>
          <view>{{datetime.hours}}</view>
          <text>:</text>
          <view>{{datetime.minutes}}</view>
          <text>:</text>
          <view>{{datetime.seconds}}</view>
        </view>
      </view>
      <view v-if="payend"
            class="payend">
        <view class="classPrice">
          <!--	<view class="ys">¥</view>
					<view class="yb">{{detailData.cost}}</view>-->
        </view>
        <view class="r">
          <text>距报名结束还有</text>
          <view>{{datetime.hours}}</view>
          <text>:</text>
          <view>{{datetime.minutes}}</view>
          <text>:</text>
          <view>{{datetime.seconds}}</view>
        </view>
      </view>
    </view>

    <scroll-view class="scroll-view"
                 :style="{height:autoHeight +'rpx'}"
                 scroll-y>
      <view class="ccc_wrap"
            id="ccc_wrap">
        <!-- 活动名 -->

        <view class="biankuang classtit floorType">
          <view class="l">
            <!-- <view v-if="!(paystart || payend) " class="classPrice">
						<view class="ys">¥</view>
						<view class="yb">{{detailData.cost}}</view>
					</view> -->
            <view class="classPrice">
              <view v-if="detailData.isBoyGirl=='1'">
                <block v-if="detailData.isVip=='1'">
                  <block v-if="detailData.costBoyVip.length>6||detailData.costGirlVip.length>6||detailData.cost.length>6||detailData.costGirl.length>6">
                    <view class="flex mar10">
                      <view class="ys">男会员 ¥</view>
                      <view class="yb">{{detailData.costBoyVip}}</view>
                    </view>
                    <view class="flex mar10">
                      <view class="ys">女会员 ¥</view>
                      <view class="yb">{{detailData.costGirlVip}}</view>
                    </view>
                    <view class="flex mar10">
                      <view class="ys">男游客 ¥</view>
                      <view class="ybs">{{detailData.cost}}</view>
                    </view>
                    <view class="flex">
                      <view class="ys">女游客 ¥</view>
                      <view class="ybs">{{detailData.costGirl}}</view>
                    </view>
                  </block>
                  <block v-else>
                    <view class="flex mar10">
                      <view class="ys">男会员 ¥</view>
                      <view class="yb">{{detailData.costBoyVip}}</view>
                      <view class="ys">女会员 ¥</view>
                      <view class="yb">{{detailData.costGirlVip}}</view>
                    </view>
                    <view class="flex">
                      <view class="ys">男游客 ¥</view>
                      <view class="ybs">{{detailData.cost}}</view>
                      <view class="ys">女游客 ¥</view>
                      <view class="ybs">{{detailData.costGirl}}</view>
                    </view>
                  </block>
                </block>
                <view v-else
                      class="flex">
                  <view class="ys">男 ¥</view>
                  <view class="yb">{{detailData.cost}}</view>
                  <view class="ys">女 ¥</view>
                  <view class="yb">{{detailData.costGirl}}</view>
                </view>
              </view>
              <view v-else>
                <view class="flex"
                      v-if="detailData.isVip=='1'">
                  <view class="ys">会员 ¥</view>
                  <view class="yb">{{detailData.costBoyVip}}</view>
                  <view class="ys">游客 ¥</view>
                  <view class="yb">{{detailData.cost}}</view>
                </view>
                <view class="flex"
                      v-else>
                  <view class="ys">¥</view>
                  <view class="yb">{{detailData.cost}}</view>
                </view>
              </view>
            </view>
						<view class="cumulactive" v-if="detailData.payment!=='1'&&jifenNum>0&&Object.keys(pointInfo).length>0&&pointInfo.point>0">
							<view class="cumulactive_max" v-if="pointInfo&&pointInfo.formula=='1'&&pointInfo.multiple>1">
								限时{{pointInfo.multiple}}倍积分奖励
							</view>
							<view :class="[pointInfo&&pointInfo.formula=='1'&&pointInfo.multiple>1?'cumulactive_max cu_margin':'cumulactive_max']">
									最高可获积分{{pointInfo.point}}
							</view>
						</view>
            <text class="line-clamp-2">{{detailData.title}}</text>
            <view class="small jibie">
              <view class="saishi man">{{'男L'+detailData.levelStart+'-L'+detailData.levelEnd}}</view>
              <view class="saishi woman">{{'女L'+detailData.girlLevelStart+'-L'+detailData.girlLevelEnd}}</view>
            </view>
            <view class="small">
              <view v-if="detailData.type=='1'" class="saishi">日常活动</view>
              <view v-if="detailData.type=='2'&& detailData.eventSystemTypeValue!==''" class="matchTip" @click="matchRules">
								<view class="match_title">
									{{detailData.eventSystemTypeValue }}{{detailData.eventSystemProject=='30'? detailData.eventTeamPeoples+'人':''}}{{detailData.eventSystemProjectValue}}	
								</view>
								<van-icon name="arrow" size="13px" color="#E14806" class="match_icon"/>
							</view>
							<view class="saishi" v-if="detailData.type=='2' && detailData.eventSystemTypeValue ==''">赛事活动</view>
            </view>
          </view>
          <view class="r">
            <view>
              <button class="fenxiang"
                      @click="showActionSheet">
                <view class="iconfx"></view>
                <text>分享</text>
              </button>
            </view>
						<view @click="showLevelPopup" class="introduction">
							<!-- <van-icon :name="'@/static/images/mine/icon-important.png'|addBaseImgUrl" size="15px" /> -->
							<text>等级说明</text>
							<van-icon name="arrow" size="13px" color="#999999"/>
						</view>
            <view></view>
          </view>
        </view>
        <view class="biankuang bm"
              @click="toMemberList">
          <view class="head">
            <text>活动报名</text>
            <!-- <view class="c99" @click="toMemberList">
						<text>详情</text>
						<van-icon name="arrow" />
					</view> -->
          </view>
          <view class="bm_wrap">
                    <view class="bm_con bm_con_match" v-if="detailData.type=='2' && detailData.eventSystemTypeValue!==''">
                      <view class="l">
                        <view :class="detailData.registrationCount>0?'img bgcolorblue':'img bgcolorhui'"></view>
                        <view v-if="houbuNum"
                              class="houbu_icon">+候补{{houbuNum}}<view class="icon"></view></view>
                      </view>
                      <view class="jindu_match">
                        <van-progress :percentage="minnum"
                                      color="#2E87FF"
                                      :show-pivot="false"
                                      stroke-width="6rpx" />
                      </view>
                      <view class="c">
                        <view v-if="detailData.registrationCount >= detailData.minNumber"
                              class="icon_blue">
                          <uni-icons type="checkmarkempty"
                                     color="#fff"></uni-icons>
                          <text>已成团</text>
                        </view>
                        <view v-else
                              class="icon">成团</view>
                      </view>
                    </view>
          					<view class="bm_con" v-else>
          					  <view class="l">
          					    <view :class="detailData.registrationCount>0?'img bgcolorblue':'img bgcolorhui'"></view>
          					    <view v-if="houbuNum"
          					          class="houbu_icon">+候补{{houbuNum}}<view class="icon"></view></view>
          					  </view>
          					  <view class="jindu">
          					    <van-progress :percentage="minnum"
          					                  color="#2E87FF"
          					                  :show-pivot="false"
          					                  stroke-width="6rpx" />
          					  </view>
          					  <view class="c">
          					    <view v-if="detailData.registrationCount >= detailData.minNumber"
          					          class="icon_blue">
          					      <uni-icons type="checkmarkempty"
          					                 color="#fff"></uni-icons>
          					      <text>已成团</text>
          					    </view>
          					    <view v-else
          					          class="icon">成团</view>
          					  </view>
          					 <view class="jindu">
          					    <van-progress :percentage="maxnum"
          					                  color="#2E87FF"
          					                  :show-pivot="false"
          					                  stroke-width="6rpx" />
          					  </view>
          					  <view class="r">
          					    <view v-if="detailData.registrationCount >= detailData.maxNumber"
          					          class="icon_blue">
          					      <uni-icons type="checkmarkempty"
          					                 color="#fff"></uni-icons>
          					      <text>已满员</text>
          					    </view>
          					    <view v-else
          					          class="icon">满员</view>
          					  </view>
          					</view>
                    <view class="bm_con bm_con_match" v-if="detailData.type=='2' && detailData.eventSystemTypeValue!==''">
                      <view class="l">
                        <view :class="detailData.registrationCount >0?'num numblue':'num numhui'">{{detailData.registrationCount}}</view>
                        <view class="tit">报名人数</view>
                      </view>
                      <view class="jindu_match">
                      </view>
                      <view class="c">
                        <view :class="detailData.registrationCount >= detailData.minNumber?'num numblue':'num numhui'">{{detailData.minNumber}}</view>
                        <view class="tit">成团人数</view>
                      </view>
                    </view>
          					<view class="bm_con" v-else>
          					  <view class="l">
          					    <view :class="detailData.registrationCount >0?'num numblue':'num numhui'">{{detailData.registrationCount}}</view>
          					    <view class="tit">报名人数</view>
          					  </view>
          					  <view class="jindu">
          					  </view>
          					  <view class="c">
          					    <view :class="detailData.registrationCount >= detailData.minNumber?'num numblue':'num numhui'">{{detailData.minNumber}}</view>
          					    <view class="tit">成团人数</view>
          					  </view>
          					  <view class="jindu">
          					  </view>
          					  <view class="r">
          					    <view :class="detailData.registrationCount >= detailData.maxNumber?'num numblue':'num numhui'">{{detailData.maxNumber}}</view>
          					    <view class="tit">人气爆棚</view>
          					  </view>
          					</view>
                  </view>
          <view class="bmbtn">
            <text v-if="detailData.registrationCount<=0">当前暂无球员报名</text>
            <view v-else class="player-list">
              <view class="left">
                <view class="image" v-for="item in appointList.filter((it,i) => i < 5)" :key="item.id">
                  <image v-if="item.playerIcon" :src="(item.playerIcon.indexOf('player-icon-boy') > -1 || item.playerIcon.indexOf('player-icon-gril') > -1) ? item.userIcon : item.playerIcon" mode=""></image>
                  <templat v-else>
                    <image :src="item.userIcon" mode=""></image>
                  </templat>
                </view>
              </view>
              <text class="right">查看报名球员</text>
            </view>
          </view>
        </view>
        <!-- 活动说明 -->
        <view class="shuoming biankuang">
          <view class="head">
            <text>活动说明</text>
          </view>
          <view class="tit">{{detailData.content}}</view>
          <view v-if="detailData.location"
                class="cd">
            <text class="tit1">场地：</text><text class="tit2">{{detailData.location}}</text>
          </view>
          <view v-if="detailData.badminton"
                class="cd">
            <text class="tit1">用球：</text><text class="tit2">{{detailData.badminton}}</text>
          </view>
          <view class="head">
            <text>报名时间</text>
          </view>
          <!-- 时间 -->
          <view class="shorttime">
            <view class="time">{{bmtime}}</view>
          </view>
          <view class="head">
            <text>活动时间</text>
          </view>
          <!-- 时间 -->
          <view class="shorttime">
            <view class="time">{{shorttime}}</view>
          </view>
        </view>
        <!-- 俱乐部信息 -->
        <view class="biankuang julebu">
          <view class="head">
            <text>俱乐部及场馆信息</text>
            <!-- <view class="c99">
						<text>更多</text>
						<van-icon name="arrow" />
					</view> -->
          </view>
          <view class="con"
                @click="gengduo('julebu')">
            <view class="conimg">
              <image v-if="jlbdata.icon"
                     :src="jlbdata.icon" />
              <image v-else
                     :src="'@/static/images/image-default.png'|addBaseImgUrl" />
            </view>
            <view class="rcon">
              <view class="condata">
                <text>{{jlbdata.clubName}}</text>
                <view class="xing">
                  <van-rate :allow-half="true"
                            readonly
                            :value="jlbdata.praise"
                            size="14px"
                            color="#FDD549" />
                  <text>{{jlbdata.praise|floorOne}}</text>
                </view>
                <view class="small">
                  <view class="saishi" v-if="jlbdata.serviceContent.includes('1')">课程</view>
                  <view class="saishi" v-if="jlbdata.serviceContent.includes('2')">活动</view>
                </view>
              </view>
              <view class="dingwei">
                <!-- <view class="top"><van-icon name="location" />{{posXY.toFixed(1)}}Km</view> -->
                <view @click.stop="callphone"
                      class="bot">
                  <van-icon name="phone-circle" />
                </view>
              </view>
            </view>
          </view>
          <view class="dizhi"
                @click="toPlaceMap">
            <view class="l">
              <view class="icondw"></view>
            </view>
            <view class="c">
              <view class="c-top">
                <text class="place-name">{{jlbdata.name}}</text>
                <text class="place-distance">{{posXY.toFixed(1)}}km</text>
              </view>
              <text class="ccc">{{jlbdata.provinceName +' '+jlbdata.cityName+' '+jlbdata.areaName+' '+jlbdata.remarks}}</text>
            </view>
            <view class="r">
              <!-- <view class="top">{{posXY.toFixed(1)}}km</view> -->
              <!-- <van-icon name="location" /> -->
              <van-icon name="arrow" />
            </view>
          </view>
        </view>

        <!-- 购买须知 -->
        <view class="biankuang floorType">
          <view class="head">
            <text>购买须知</text>
          </view>
          <view class="shortxuzhi gmxz_con">
            <view v-if="detailData.type=='2'">
							<text class="">活动人数：</text><text>{{detailData.maxNumber}}</text>
						</view>
						<view v-else>
							<text class="">活动人数：</text><text>{{detailData.minNumber +'-'+ detailData.maxNumber}}</text>
						</view>
            <!-- <view>
						<text>总课时：</text><text>{{detailData.cancelHours}}小时</text>
					</view> -->
            <view>
              <text>单次活动人数：</text><text>不超过 {{detailData.maxNumber}} 人</text>
            </view>
						<view class="flex-box" v-if="detailData.userLimit>0">
              <text class="label">报名条件：</text><text>{{detailData.userLimit==2?'仅限俱乐部正式会员报名，如有疑问请联系俱乐部':'仅限俱乐部会员报名，如有疑问请联系俱乐部'}}</text>
            </view>
            <view>
               <text>活动限购：</text><text>报名结束前{{detailData.cancelHours}}小时不能取消报名</text>
            </view>
          </view>
        </view>
        <view class="biankuang floorType">
          <view class="head">
            <text>注意事项</text>
          </view>
          <xjx-zy-con></xjx-zy-con>
        </view>
        <view class="biankuang floorType"
              v-if="listdata.length>0">
          <view class="head mar_15">
            <text>猜您喜欢</text>
            <!-- <view class="c99" @click="gengduo('list')">
						<text>更多</text>
						<van-icon name="arrow" />
					</view> -->
          </view>
          <view class="pad" v-for="(item,index) in listdata" :key="index">
            <xjx-activity-item v-if="index<=1" @todetail="gotodetail"
                      :item="item"
                      :like="1"></xjx-activity-item>
          </view>
        </view>
      </view>
    </scroll-view>
		<!-- 赛事活动展示 -->
		<view v-if="detailData.type==2&&detailData.eventSystemType&&detailData.state==2&&detailData.status=='0'" class="footer-view">
      <!-- eventSystemType 赛制分类（10循环淘汰赛20单循环赛30单淘汰赛） -->
      <!-- 循环淘汰 组队eventTeamStatus > 0,分组eventGroupsStatus > 0，排名 eventGroupsStatus > 0
       单循环、单淘汰分队，eventTeamStatus > 0  排名 eventTeamStatus>0 -->
			<view v-if="detailData.eventSystemType=='10'" :class="detailData.eventTeamStatus>0?'team blue':'team'" @click="toEventsInfo('/activity/teamList/teamList?actId='+detailData.id + '&teamStatus=' + detailData.eventTeamStatus + '&groupStatus=' + detailData.eventGroupsStatus+'&clubName='+detailData.clubName,detailData.eventTeamStatus>0)">
				<view class="top">
					1
				</view>
				<view class="middle">
					组队
				</view>
				<view class="bottom">
					{{detailData.eventTeamStatus>0?'已完成':'准备中'}}
				</view>
			</view>
			<view v-if="detailData.eventSystemType=='10'" :class="detailData.eventGroupsStatus>0?'group blue':'group'" @click="toEventsInfo('/activity/teamList/teamList?actId='+detailData.id + '&teamStatus=' + detailData.eventTeamStatus + '&groupStatus=' + detailData.eventGroupsStatus+'&clubName='+detailData.clubName,detailData.eventGroupsStatus>0)">
				<view class="top">
					2
				</view>
				<view class="middle">
					分组
				</view>
				<view class="bottom">
					{{detailData.eventGroupsStatus>0?'已完成':'准备中'}}
				</view>
			</view>
			<view v-if="detailData.eventSystemType=='20'||detailData.eventSystemType=='30'" :class="detailData.eventTeamStatus>0?'team-only blue':'team-only'" @click="toEventsInfo('/activity/teamList/teamList?actId='+detailData.id + '&teamStatus=' + detailData.eventTeamStatus + '&groupStatus=' + detailData.eventGroupsStatus+'&clubName='+detailData.clubName,detailData.eventTeamStatus>0)">
				<view class="middle">
					分队
				</view>
				<view class="bottom">
					{{detailData.eventTeamStatus>0?'已完成':'准备中'}}
				</view>
			</view>
			<view :class="bfFlag?'score blue':'score'" @click="toEventsInfo('/activity/matchInfo/matchDetail?actId='+detailData.id,bfFlag)">
				<view class="">
					比分
				</view>
				<view class="">
					排名
				</view>
			</view>
		</view>
    <!-- 底部定位按钮 0已发布2未发布 state报名状态0未开始1进行中2已结束 classState课程状态-->
    <view class="detail_btnwrap"
          v-else-if="detailData.state=='0'|| detailData.state=='1' || detailData.state=='2'">
      <view :class="ONOFF?'btn-box':'btn-noevents btn-box'">
      	<!-- <view class="jg">价格：</view>
      	<view class="ys">¥</view>
      	<view class="yb">{{detailData.cost}}</view> -->
      	<!-- <view v-if="userInfo.id">
      		<view v-if="detailData.state=='0'" class="jijiang">即将开抢</view>
      		<van-button @click="gotoconfirm('houbu')" v-else-if="(detailData.state=='1' && houbuNum && detailData.activityState=='1') || (detailData.state == '1' && (detailData.registrationCount == detailData.maxNumber) && detailData.activityState=='1')" round custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;background-color:#F77350;color:#fff;">已满员</van-button>
      		<van-button @click="gotoconfirm" v-else-if="(detailData.state=='1' && houbuNum ) || (detailData.state == '1' && (detailData.registrationCount == detailData.maxNumber))" round custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;background-color:#F77350;color:#fff;">候补报名</van-button>
      		<van-button @click="gotoconfirm" v-else-if="detailData.state=='1'" round type="info" custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;">立即抢购</van-button>
      		<view class="jieshu" v-else-if="detailData.state=='2'">报名结束</view>
      	</view> -->
      	<view v-if="cancelSignUpBtnShow"
      	      @click="cancelSignUp"
      	      class="cancel-sign-btn">
      	  取消报名
      	</view>
        <view v-if="detailData.status=='1'"
      	      class="jieshu">已关闭</view>
        <view v-else-if="detailData.status=='2'"
      	      class="jieshu">未发布</view>
      	<view v-else-if="detailData.state=='0'"
      	      class="jijiang">即将开抢</view>
      	<!-- 满员 2021-07-29注销 不可以报名 活动已开始，人员已满、活动x小时前不能取消报名，也就不能替补报名-->
      	<!-- <xjx-login @callBack="gotoconfirm('houbu')"
      	           v-else-if="(detailData.state == '1' && (detailData.registrationCount >= detailData.maxNumber) && detailData.activityState=='1') || (detailData.state=='1' && houbuOnOff && (detailData.registrationCount >= detailData.maxNumber))">
      	  <template v-slot:loginBtn> -->
						<!-- <van-button round
												custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;background-color:#F77350;color:#fff;">已满员</van-button> -->
						<!-- <button type="info" class="buy-btn orange-btn">已满员</button>
					</template>
				</xjx-login> -->
				<!-- 候补 可以报名活动未开始，人员已满 -->
				<xjx-login @callBack="gotoconfirm"
									 v-else-if="(detailData.state == '1' && (detailData.registrationCount >= detailData.maxNumber)) && detailData.activityState=='0'">
					<template v-slot:loginBtn>
						<!-- <van-button @click="gotoconfirm"
												round
												custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;background-color:#F77350;color:#fff;">候补报名</van-button> -->
						<button @click="gotoconfirm" type="info" class="buy-btn orange-btn">候补报名</button>
					</template>
				</xjx-login>
      	<!-- 正常抢购 -->
      	<xjx-login @callBack="gotoconfirm"
      	           v-else-if="detailData.state=='1' && detailData.payment=='0'"
									 >
      	  <template v-slot:loginBtn>
      	   <!-- <van-button @click="gotoconfirm"
      	                round
      	                type="info"
      	                custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;">立即抢购</van-button> -->
      			<button @click="gotoconfirm" type="info" class="buy-btn">立即抢购</button>
      	  </template>
      	</xjx-login>
      	<!-- 线下支付报名 -->
      	<xjx-login @callBack="gotoconfirm"
      	           v-else-if="detailData.state=='1' && detailData.payment=='1'">
      	  <template v-slot:loginBtn>
      	    <!-- 线下支付 -->
      	    <!-- <van-button @click="gotoconfirm('xianxia')"
      	                round
      	                type="info"
      	                custom-style="padding:0 58rpx;height:78rpx;margin-right:10rpx;">立即报名</van-button> -->
						<button @click="gotoconfirm('xianxia')" type="info" class="buy-btn">立即抢购</button>
      	  </template>
      	</xjx-login>
      	
      	<view class="jieshu"
      	      v-else-if="detailData.state=='2'">报名结束</view>
      	<view class="houbu_icon"
      	      v-if="detailData.state=='1' && detailData.payment=='1'">线下付款哟<view class="icon"></view>
      	</view>
      </view>
    </view>
		
    <view class="canvas-box">
      <canvas :style="'width: 375px;position:fixed;top:99999px;height:'+canvasHeight+'px'"
              canvas-id="mycanvas" />
    </view>
    <van-action-sheet :show="actionSheetShow"
                      :actions="actions"
                      @close="onSheetClose($event)"
                      @select="onSheetSelect($event)"
                      @cancel="onSheetClose($event)"
                      cancel-text="取消" />
    <van-action-sheet :show="cancelSignSheetShow"
                      :actions="cancelActions"
                      @close="onSheetClose($event,2)"
                      @select="onSheetSelect($event,2)"
                      @cancel="onSheetClose($event,2)"
                      cancel-text="取消" />
		<van-dialog id="van-dialog"
		            confirm-button-color="#2E87FF"
		            cancel-button-color="#333" />
		<!-- 球员级别说明popup -->
		<van-popup round
		           :show="levelPopupShow"
		           position="bottom"
		           custom-style="height: 610px;"
		           @close="closeLevelPopup"
		           closeable>
		  <view class="hypopup">
		    <text class="tit">L1-L9球员等级说明</text>
				<view class="content">
					<view class="levelTip">
						<text>注：请根据活动定义的级别，选择您适宜参加的活动。</text>
						<text>您的自评级别将作为您报名课程或活动时供俱乐部参考的级别，具体活动将以您在俱乐部中的认证级别为准”</text>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余1级：</view><view>初学者，能把球打过网</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余2级：</view><view>了解基本规则和基本动作，但很不稳定</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余3级：</view><view>熟悉基本规则和基本动作，发力掌握不好，不会反手，步法较乱</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余4级：</view><view>技术动作比较熟练，高远球能到后场，掌握反手动作，熟悉基础步法</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余5级：</view><view>能应用部分高级技术如假动作、勾对角，攻防质量较高，初步控制场上局势</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余6级：</view><view>技术掌握全面，有一定战术意识，步法较娴熟，较好控制场上局势</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余7级：</view><view>很强的攻防能力，熟练应用各种高级技战术，能及时调整战术和心态</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余8级：</view><view>经常取得大型业余比赛前三名，具备和专业退役运动员的对抗能力</view>
					</view>
					<view class="col666 flex">
					  <view class="left-label">业余9级：</view><view>专业退役运动员</view>
					</view>
				</view>
		    <van-button @click="closeLevelPopup"
		                round
		                type="info"
		                custom-style="height:88rpx;margin:0 30rpx;display:block;line-height:88rpx">知道了</van-button>
		  </view>
		</van-popup>
		<!-- 赛制说明popup -->
		<van-popup round
		           :show="matchPopupShow"
		           position="bottom"
		           custom-style="height: 610px;"
		           @close="closeMatchPopup"
		           closeable>
		  <view class="hypopup_match">
		    <text class="tit">赛制说明</text>
				<view class="content">
					<view class="title_match">
						循环淘汰赛 赛制说明：
					</view>
					<view class="col666">
					  1.循环淘汰赛：赛制主要包括组内循环赛和小组出线后的淘汰赛两部分。组内循环赛同单循环赛规则；淘汰赛同单淘汰赛规则。
					</view>
					<view class="col666">
					  2.根据总队数，系统会自动生成可选分组，供裁判或管理员分组时选择，每组至少3队。
					</view>
					<view class="col666">
					 3.组内循环赛结束后，每组将有2队晋级，开始组间交叉淘汰赛。
					</view>
					<view class="title_match">
						单循环赛 赛制说明：
					</view>
					<view class="col666">
					  1.单循环赛：不分组，所有参与比赛的队伍，每两队均需要轮流比赛一次。
					</view>
					<view class="col666">
					  2.评分规则：按照国际裁判标准。
					</view>
					<view class="col666">
					  1）按获胜场数定名次；
					</view>
					<view class="col666">
					  2）获胜场数相同时：当获胜场数相同的为两支队伍时，则按两者间比赛的胜者名次列前；当获胜场数相同的为3支或3支以上队伍时，则按净胜分数定名次。
					</view>
					<view class="col666">
					  3）净胜分数相同时：当净胜分数相同的为两支队伍时，则按两者间比赛的胜者名次列前；当净胜分数相同的为3支或3支以上队伍时，则现场抽签后定名次。
					</view>
					<view class="col666">
					  3.循环赛由于场数多，比赛时间长，使用场地数量也多，因此循环赛的队数不宜过多。在队数过多时，可采用循环淘汰赛的办法。
					</view>
					<view class="title_match">
						单淘汰赛 赛制说明：
					</view>
					<view class="col666">
					  单淘汰赛：不分组，按照2的乘方数（4、8、16、32...）随机抽取两支队伍比赛。胜者进入下一轮，负者出局。每一轮比赛要淘汰一半参赛队伍，直至冠亚季军名次争夺。
					</view>
				</view>
				<view class="matchKnow" @click="closeMatchPopup">
					<view class="">
						知道了
					</view>
					
				</view>
		   <!-- <van-button @click="closeMatchPopup"
		                round
		                type="info"
		                custom-style="height:88rpx;margin:0 30rpx;display:block;line-height:88rpx">知道了</van-button> -->
		  </view>
		</van-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { rili, positionXY, dateUtils } from '@/common/js/util.js';
import Dialog from "@/wxcomponents/vant/dist/dialog/dialog";
import {baseImgUrl} from '@/common/js/config.js'
export default {
  data() {
    return {
      detailid: '',
      detailstatus: '', //课程状态发布未发布
      detailtype: '', //订单长期短期
      liebiaodata: [], //长课列表数据
      shorttime: '', //短期课时间
      bmtime: '', //报名时间
      radioonoff: true, //是否限购对号
      jlbdata: {
        serviceContent: ''
      }, //俱乐部信息
      detailData: {},
      jiaoliandata: {}, //教练信息
      minnum: '', //min百分数
      maxnum: '', //max百分数
      state: '', //0:未开始，1：进行中，2：已结束
      paystart: false, //
      payend: false, //
      datetime: {}, //倒计时时间
      listdata: [], //猜您喜欢
      posXY: Number(),
      fxonoff: false,
      height: '',
      topHeight: '', //切换栏距离顶部的高度
      sHeight: '', //滚动到高的时，切换栏显示
      ztHeight: '', //状态高度
      dhHeight: '', //导航高度
      showTab: false, //切换栏显示
      showActive: '0', //切换栏显示
      anchorArray: [], //切换高度
      autoHeight: '',
      houbuNum: 0, // 候补人数
      houbuOnOff: false, //候补是否可以下单
      canvasHeight: 667,
      actionSheetShow: false,
      cancelSignSheetShow: false,
      actions: [
        { name: '分享', id: 0, color: '#2E87FF', openType: 'share' },
        { name: '复制活动信息', id: 1, color: '#2E87FF' },
        { name: '生成海报', id: 2, color: '#2E87FF' }
      ],
      cancelActions: [],
      appointList: [], // 已报名球员（包括候补）

      qrcodeImg: '',

      imagePath: '',
      img: '',
      wechat: '../../images/wechat.png',
      quan: '../../images/quan.png',
      code: 'E7AI98',
      inputValue: '',
      maskHidden: false,
      name: '',
      touxiang: '',
      code: 'E7A93C',
      isApprove: '0', //用户会员状态
      ONOFF: true, //按钮开关
      cancelSignUpBtnShow: false ,// 取消报名按钮显示
			jifenNum:'',//最大金额
			pointInfo:{
				// formula:'1',//	是否显示积分倍数 1显示 0不显示
				// multiple:1,// 积分倍数
				// point:1 //最高积分数
			},
      showImgsArr:[],//预览图片
			levelPopupShow: false,
			matchPopupShow: false,
			backBtnShow: true
    };
  },
  filters: {
  },
  computed: {
    ...mapState(['userInfo', 'accessToken', 'clubInfo', 'position']),
		bfFlag(){
			if((this.detailData.eventSystemType==10&&this.detailData.eventGroupsStatus>0)||(this.detailData.eventTeamStatus>0&&this.detailData.eventSystemType!=10)){
				return true
			}
      return false
      // return this.detailData.eventStatus > 0
		},
  },
  onLoad(option) {
    // 通过扫描小程序码，得到的参数格式为{scene: 'id%3D1372722514836873216'}
    this.detailid = option.id
      ? option.id
      : this.getUrlParam(decodeURIComponent(option.scene)).id;
    this.detailstatus = option.status;
    this.fxonoff = option.fxonoff ? true : false;
    console.log(
      'op',
      option,
      this.getUrlParam(decodeURIComponent(option.scene)).id
    );
    this.getdetail();
    this.queryActEnterListToUser();
    let pages = getCurrentPages()
		if(pages.length==1){
			this.backBtnShow = false
		}
  },
  onShow() {
    // 如果登录状态，获取是否已经报名，显示取消报名按钮
    if (this.accessToken) {
      this.getCancelBtnShow();
    }
		if (this.accessToken&&this.detailData.clubId) {
		  this.getHuiYuan();
		}
  },
  mounted() {
    this.height = uni.getMenuButtonBoundingClientRect().top + 'px';
    let systemInfo = uni.getSystemInfoSync();
    // px转换到rpx的比例
    let pxToRpxScale = 750 / systemInfo.windowWidth;
    // 状态栏的高度
    this.ztHeight = systemInfo.statusBarHeight * pxToRpxScale;
    this.dhHeight = 44 * pxToRpxScale;
    //   console.log('systemInfo',pxToRpxScale,'--',ktxStatusHeight,'===',navigationHeight)

    this.topHeight = this.ztHeight + this.dhHeight + 60;
  },
  onReady() {
    console.log('onReady------------------', wx.env);
    let _this = this;
    let query = wx.createSelectorQuery();

    query
      .select('.ccc_wrap')
      .boundingClientRect(res => {
        console.log('res-23-----1', res);
        if(res){
          _this.sHeight = res.top - _this.topHeight; //根据实际需求加减值
        }
        
        // _this.autoHeight = res.height ;
      })
      .exec();
    let heightArr = [];
    let h = 0;
    setTimeout(() => {
      query
        .selectAll('.floorType')
        .boundingClientRect(react => {
          // console.log('floorType',react)
          react.forEach(res => {
            if(res){
              h = res.top - _this.topHeight;
              heightArr.push(h);
            }
          });
          this.anchorArray = heightArr;
        })
        .exec();
    }, 1000);
  },
  onPageScroll(e) {
    //滚动
    // console.log('--e',e.scrollTop)
    //切换状态栏出现
    if (e.scrollTop > this.sHeight && e.scrollTop > 0) {
      this.showTab = true;
      wx.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#000000'
      })
    } else {
      this.showTab = false;
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#ffffff'
      })
    }
    if (
      this.anchorArray[1] > e.scrollTop &&
      e.scrollTop > this.anchorArray[0]
    ) {
      this.showActive = '0';
    } else if (
      this.anchorArray[2] > e.scrollTop &&
      e.scrollTop > this.anchorArray[1]
    ) {
      this.showActive = '1';
    } else if (
      this.anchorArray[3] - 300 > e.scrollTop &&
      e.scrollTop > this.anchorArray[2] &&
      this.anchorArray.length > 3
    ) {
      this.showActive = '2';
    } else if (
      this.anchorArray[3] - 300 < e.scrollTop &&
      this.anchorArray.length > 3
    ) {
      this.showActive = '3';
    } else if (
      e.scrollTop > this.anchorArray[2] &&
      this.anchorArray.length == 3
    ) {
      this.showActive = '2';
    }
  },
  methods: {
    ...mapMutations(['setStateAttr', 'loginOut']),
		showLevelPopup(){
			this.levelPopupShow = true
		},
		closeLevelPopup(){
			this.levelPopupShow = false
		},
		matchRules(){
			this.matchPopupShow = true
		},
		closeMatchPopup(){
			this.matchPopupShow = false
		},
    gotoback(text) {
      //返回上一页
      if (text) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
      //
    },
		toEventsInfo(url,boo) {
			if(boo){
				this.setStateAttr({
					key: 'sportEventId',
					val: this.detailData.eventSystemType
				})
				uni.navigateTo({
					url: url
				})
			}
		},
    //预览图片
    showImg(index){
      uni.previewImage({
        current:index,
        urls:this.showImgsArr,
      })
    },
    changeTab(e) {
      //切换栏
      console.log('ee',e)
      let _this = this;
      let topH = _this.anchorArray[e.detail.index] + _this.dhHeight;
      // this.showActive = String(e.detail.index)
      uni.pageScrollTo({
        scrollTop: topH,
        duration: 300
      });
    },
    toMemberList() {
      uni.navigateTo({
        url: `/activity/detail/memberList?id=${this.detailid}`,
        success: res => {
          console.log('成功');
        },
        fail: res => {
          console.log('失败', res);
        },
        complete: () => {
          console.log('成功失败');
        }
      });
    },
    // 是否展示取消报名
    async getCancelBtnShow() {
      if (!this.accessToken) {
        this.cancelSignUpBtnShow = false;
      }
      this.$api
        .getUserInfo({
          'ACCESS-TOKEN': this.accessToken
        })
        .then(res => {
          if (res && res.code == 200) {
            let param = {
              'ACCESS-TOKEN': this.accessToken,
              pageSize: 20,
              pageNo: 1,
    					actId: this.detailid,
    					status: '2'
            };
            this.$api
              .queryOrderList(param)
              .then(res => {
                if (res && res.code == 200) {
                  let arr = new Array();
                  res.data.list.map((item, index) => {
                    if (item.refundFlag) {
                      arr.push({
                        name: item.relName,
                        id: item.id,
                        color: '#2E87FF'
                      });
                    }
                  });
                  if (arr.length > 0) {
                    this.cancelActions = arr;
                    this.cancelSignUpBtnShow = true;
                  } else {
                    this.cancelActions = [];
                    this.cancelSignUpBtnShow = false;
                  }
                }
              })
              .catch();
          } else if (res && res.code == 401) {
            this.loginOut();
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            });
          }
        })
        .catch();
    },
    // 取消报名
    cancelSignUp() {
      if (this.cancelActions.length > 1) {
        this.cancelSignSheetShow = true;
      } else {
        uni.navigateTo({
          url:
            '/personalCenter/myOrder/detail/detail?id=' +
            this.cancelActions[0].id
        });
      }
    },
    getdetail() {
      //GET GET /api/act/getActDetailById/{id}
      this.$api
        .getActiveDetailById(
          {
            'ACCESS-TOKEN': this.accessToken
          },
          this.detailid
        )
        .then(res => {
          if (res && res.code == '200' && res.data) {
            let data1 = res.data;
            this.detailtype = data1.type;
            this.detailstatus = data1.status;
            this.detailData = data1;
            this.getlistdata();
						let actTimeArr = [data1.startDate, data1.endDate];
						let actTime =
							actTimeArr[0] == actTimeArr[1]
								? this.dateAddDay(actTimeArr[0])
								: this.dateAddDay(data1.startDate) +
									' - ' +
									this.dateAddDay(data1.endDate);
						actTime +=
							'\n\n' + data1.startTime.substr(0, 5) + '-' + data1.endTime.substr(0, 5);
						this.shorttime = actTime
						let bmTimeArr = [data1.registrationStart, data1.registrationEnd];
						if(bmTimeArr[0].substr(0, 10) == bmTimeArr[1].substr(0, 10)){
							this.bmtime = this.dateAddDay(bmTimeArr[0].substr(0, 10)) + '\n\n' + bmTimeArr[0].substr(11,5) + '-' + bmTimeArr[1].substr(11,5)
						}else{
							this.bmtime = this.dateAddDay(bmTimeArr[0].substr(0, 10)) + '\n' + bmTimeArr[0].substr(11,5)
									+ ' - ' +
									this.dateAddDay(bmTimeArr[1].substr(0, 10)) + '\n' + bmTimeArr[1].substr(11,5);
						}
            this.getchangguan(data1.placeId);
            let arrImg = []
            res.data.actImgList.map((item,index)=>{
              arrImg.push(item.fullImgUrl)
            })
            this.showImgsArr = arrImg
            this.minchang(
              data1.registrationCount,
              data1.minNumber,
              data1.maxNumber
            );
            this.state = res.data.state;
            this.houbuOnOff =
              rili.zhuannums() > rili.zhuannums(res.data.buyEndDate)
                ? true
                : false;
            if (this.accessToken) {
              this.getHuiYuan();
            }
            let time_;
            if (res.data.payStartCountDown > 0 && res.data.state == '0') {
              this.paystart = true;
              //未开始
              // this.datetime = dateUtils.formatSecond(res.data.payStartCountDown)
              let num = res.data.payStartCountDown;
              time_ = setInterval(() => {
                num -= 1;
                this.datetime = dateUtils.formatSecond(num);
                if (num <= 0) {
                  clearInterval(time_);
                }
              }, 1000);
            } else if (res.data.payEndCountDown > 0 && res.data.state == '1') {
              //即将结束
              this.payend = true;
              let num = res.data.payEndCountDown;
              time_ = setInterval(() => {
                num -= 1;
                this.datetime = dateUtils.formatSecond(num);
                if (num <= 0) {
                  clearInterval(time_);
                }
              }, 1000);
            }
            if (data1.registrationCount > data1.maxNumber) {
              this.houbuNum = data1.registrationCount - data1.maxNumber;
            }
						let costBoyVip=data1.costBoyVip?data1.costBoyVip:''
						let costGirlVip=data1.costGirlVip?data1.costGirlVip:''
						let cost1=data1.cost?data1.cost:''
						let costGirl=data1.costGirl?data1.costGirl:''
						if(data1.payment!=='1'){//区分是不是线下支付 1是 0否
							if(data1.isBoyGirl=='1'){//是否区分男女 1区分 0不区分
									if(data1.isVip=='1'){//是否区分vip 1区分 0不区分
										let viparr=[costBoyVip,costGirlVip,cost1,costGirl]
										let maxVip=viparr.sort(function(a,b){
											return b-a
										})
										this.jifenNum=maxVip[0]
									}else{
										let ar=[cost1,costGirl]
										let maxMoney=ar.sort(function(a,b){
											return b-a
										})
										this.jifenNum=maxMoney[0]
									}
							}else if(data1.isVip=='1'){ //游客与会员的区分 1区分 0不区分
								if(Number(data1.costBoyVip)>Number(data1.cost)){
									this.jifenNum=data1.costBoyVip
								}else{
									this.jifenNum=data1.cost
								}
							}else{
							    this.jifenNum=data1.cost   //单个价格
							}
							this.queryPointInfo()
						}
						//store存储
						this.setStateAttr({
							key: 'sportName',//赛制分类名称
							val: this.detailData.eventSystemTypeValue
						});
						this.setStateAttr({
							key: 'sportObjname',//赛制项目名称
							val: this.detailData.eventSystemProjectValue
						});
						this.setStateAttr({
							key: 'sportEventId',//赛制分类id
							val: this.detailData.eventSystemType
						});
						this.setStateAttr({
							key: 'sportObjId',//赛制项目id
							val: this.detailData.eventSystemProject
						});
						this.setStateAttr({
							key: 'sportStatue',//赛事状态
							val: this.detailData.eventStatus
						});
          }
        });
    },
	 async queryPointInfo(){//获取可获得积分数
			let param={
				goodsAmount:this.jifenNum,
				type:'3'
			}
			console.log(this.priceall,'评价详情接口')
			const res =await this.$api.queryPointInfo(param)
			if(res && res.code == 200){
				this.pointInfo=res.data
			}
		},
    getchangguan(id) {
      //获取俱乐部场馆信息/api/club/place/get/{id
      this.$api
        .getClubPlaceDetail(
          {
            'ACCESS-TOKEN': this.accessToken
          },
          id
        )
        .then(res => {
          if (res.code == '200' && res.data) {
            this.jlbdata = res.data;
            this.currentPos = {
              latitude: res.data.y,
              longitude: res.data.x,
              name: res.data.name
            };
            let p1 = {
              lng: res.data.x,
              lat: res.data.y
            };
            let p2 = {
              lng: this.position.lng,
              lat: this.position.lat
            };
            this.posXY = Number(positionXY(p1, p2));
          }
        });
    },
    callphone() {
      //拨打电话
      uni.makePhoneCall({
        phoneNumber: this.jlbdata.clubContact //仅为示例
      });
    },
    minchang(num, min, max) {
      //成团数num 是实际数，
      if (num < min) {
        this.minnum = Math.round((num / min) * 10000) / 100.0;
      } else {
        let s = num - min;
        let l = max - min;
        this.minnum = 100;
        this.maxnum = Math.round((s / l) * 10000) / 100.0;
        if (this.maxnum > 100) {
          this.maxnum = 100;
        }
        console.log('数', this.maxnum);
      }
    },
    gotodetail(id) {
      //去详情
      uni.navigateTo({
        url: '/activity/detail/detail?id=' + id
      });
    },
    async gotoconfirm(text) {
      //去确认订单
      if (this.ONOFF) {
				this.ONOFF = false
				const res = await this.$api.queryNoPayActOrder({"ACCESS-TOKEN": this.accessToken},this.detailid)
				this.ONOFF = true
				if(res&&res.code==302){
					if(res.data&&res.data.id){
						Dialog.confirm({
							title: res.message,
							cancelButtonText: '继续购买',
							confirmButtonText: '立即支付',
							width: '325px',
							messageAlign: 'left',
							customStyle: 'border-radius:7.5px;',
							className: 'my-dialog-confirm'
						})
						.then(() => {
							uni.navigateTo({
								url: `/personalCenter/myOrder/detail/detail?id=${res.data.id}`
							})
						})
						.catch(() => {
							// on cancel
							this.toSalesProcess(text)
						})
					}else{
						Dialog.confirm({
							title: res.message,
							cancelButtonText: '继续购买',
							confirmButtonText: '立即查看',
							width: '325px',
							messageAlign: 'left',
							customStyle: 'border-radius:7.5px;',
							className: 'my-dialog-confirm'
						})
						.then(() => {
							uni.navigateTo({
								url: `/personalCenter/myOrder/index/index?type=1`
							})
						})
						.catch(() => {
							// on cancel
							this.toSalesProcess(text)
						})
					}
				}else{
					this.toSalesProcess(text)
				}
      }
    },
		toSalesProcess(text){
			if (text == 'houbu') {
			  uni.showToast({
			    title: '活动已满员不能报名，如有疑问，请您联系俱乐部哦~',
			    duration: 3000,
			    icon: 'none'
			  });
			} else {
			  if (
			    this.detailData.userLimit == '1' ||
			    this.detailData.userLimit == '2'
			  ) {
			    //是俱乐部的正式会员
			    if (this.isApprove >= this.detailData.userLimit) {
			      uni.navigateTo({
			        url: `/mainProcess/confirmOrder/confirmOrder?id=${
			          this.detailid
			        }&type=activity&isApprove=${this.isApprove}`
			      })
			    } else {
			      uni.showToast({
			        title: `您不符合活动报名要求哦！如有疑问，请您联系俱乐部哦~`,
			        duration: 3000,
			        icon: 'none'
			      })
			    }
			  } else {
			    uni.navigateTo({
			      url: `/mainProcess/confirmOrder/confirmOrder?id=${
			        this.detailid
			      }&type=activity&isApprove=${this.isApprove}`
			    })
			  }
			}	
		},
    getHuiYuan() {
      //获取用户会员状态
      this.$api
        .getApprove(
          {
            'ACCESS-TOKEN': this.accessToken
          },
          this.detailData.clubId
        )
        .then(res => {
          if (res && res.code == '200') {
            //用户会员状态大于等于活动要求会员
            this.isApprove = res.data.isApprove;
          }
        });
    },
    gengduo(text) {
      //更多
      if (text == 'julebu') {
        uni.navigateTo({
          url: '/mainProcess/club/detail/detail?id=' + this.detailData.clubId
        });
      } else if (text == 'jiaolian') {
        uni.navigateTo({
          url: '/mainProcess/goldCoach/detail/detail?id=' + this.detailData.coachId
        });
      } else if (text == 'list') {
        uni.switchTab({
          url: '/pages/activity/index/index'
        });
      }
    },
    toPlaceMap() {
      console.log('地图', this.currentPos);
      let currentPos = this.currentPos;
      uni.openLocation({
        latitude: Number(currentPos.latitude), //要去的纬度-地址
        longitude: Number(currentPos.longitude), //要去的经度-地址
        name: currentPos.name
      });
    },
    getlistdata() {
      //获取列表数据
      let data = {
        'ACCESS-TOKEN': this.accessToken,
        state: '1',
        sort: '2', //排序方式
        pageNo: 1,
        pageSize: 3,
        likeClubId: this.detailData.clubId,
        x: this.position.lng,
        y: this.position.lat
      };
      console.log('--',data, this.detailData, this.detailData.clubId)
      this.$api.queryActListToLike(data).then(res => {
        if (res.code == '200' && res.data) {
          let arr = [];
          res.data.list.forEach((item, i) => {
            if (this.detailid !== item.id) {
              arr.push(item);
            }
          });
          this.listdata = arr;
          console.log('arr', this.listdata);
        }
      });
    },
    async queryActEnterListToUser() {
      const param = {
        'ACCESS-TOKEN': this.accessToken,
        pageNo: '1',
        pageSize: '99999',
        status: '0',
        actId: this.detailid
      };
      const res = await this.$api.queryActEnterListToUser(param);
      if (res && res.code == 200) {
        this.appointList = res.data.list;
      }
    },
    dateAddDay(date) {
      date = date.replace(/-/g, '/');
      let d = new Date(date).getDay();
      let cd = '';
      switch (d) {
        case 1:
          cd = '周一';
          break;
        case 2:
          cd = '周二';
          break;
        case 3:
          cd = '周三';
          break;
        case 4:
          cd = '周四';
          break;
        case 5:
          cd = '周五';
          break;
        case 6:
          cd = '周六';
          break;
        default:
          cd = '周日';
          break;
      }
      return `${date} ${cd}`;
    },
    onSheetSelect(e, type = 1) {
      console.log(e.detail.id, type);
      if (type == 1) {
        if (e.detail.id == 1) {
          this.setClipData();
        }
        if (e.detail.id == 2) {
          this.getQrcodeImg();
          // this.setClipData()
        }
      } else {
        console.log(e.detail.id);
        uni.navigateTo({
          url: '/personalCenter/myOrder/detail/detail?id=' + e.detail.id
        });
      }
    },
    setClipData() {
      let data = this.detailData;
      let actTimeArr = [data.startDate, data.endDate];
      let actTime = `\n${
        actTimeArr[0] == actTimeArr[1]
          ? this.dateAddDay(actTimeArr[0])
          : this.dateAddDay(data.startDate) +
            ' - ' +
            this.dateAddDay(data.endDate)
      }`;
      actTime +=
        ' ' + data.startTime.substr(0, 5) + '-' + data.endTime.substr(0, 5);
      let [signUpD, signUpT] = data.registrationEnd.substr(0, 16).split(' ');
      let signUpTime = `\n${this.dateAddDay(signUpD)} ${signUpT}`;
      let actPersonNumber = `人数：${
        data.registrationCount > data.maxNumber
          ? data.maxNumber +
            '/' +
            data.maxNumber +
            '  替补：' +
            (data.registrationCount - data.maxNumber)
          : data.registrationCount + '/' + data.maxNumber
      }`;
      // let actLevel = '男 L'+data.levelStart+'-L'+data.levelEnd+'   女 L'+data.girlLevelStart+'-L'+data.girlLevelEnd
      let actLevel = '';
      if (
        data.levelStart == data.levelEnd &&
        data.girlLevelStart == data.girlLevelEnd
      ) {
        actLevel += `男 L${data.levelStart}   女 L${data.girlLevelStart}`;
      } else {
        actLevel += `男 L${data.levelStart}-L${data.levelEnd}   女 L${
          data.girlLevelStart
        }-L${data.girlLevelEnd}`;
      }
      let actPrice = '';
      if (data.costGirl !== undefined && data.costGirl !== data.cost) {
        actPrice += `男￥${data.cost}   女￥${data.costGirl}`;
      } else {
        actPrice += `男￥${data.cost}   女￥${data.cost}`;
      }
      let adminPhone = data.clubContact
        ? `\n管理员联系电话：${data.clubContact}`
        : '';
      let [actAppoint, actAppointId] = ['', 1];
      let [actHoubu, actHoubuId] = ['', 1];
      let h5Url =
        this.$baseUrl.split('api/')[0] +
        'f/openweapp.html?type=2&url=' +
        encodeURIComponent('/activity/detail/detail?id=' + this.detailid);
      this.appointList.forEach((item, index) => {
        if (item.isBack == '0') {
          actAppoint += `\n${actAppointId}. 【L${item.playerSkillLevel}】${
            item.relName
          } (${item.sex == 1 ? '男' : '女'})`;
          actAppointId++;
        } else {
          actHoubu += `\n${actHoubuId}. 【L${item.playerSkillLevel}】${
            item.relName
          } (${item.sex == 1 ? '男' : '女'})`;
          actHoubuId++;
        }
      });
      let copyText = `${
        data.title
      }\n活动时间：${actTime}\n报名截止：${signUpTime}\n地点：${
        this.jlbdata.name
      }`;
      if (data.location) {
        copyText += `\n场地：${data.location}`;
      }
      if (data.badminton) {
        copyText += `\n用球：${data.badminton}`;
      }
      copyText += `\n${actPersonNumber}\n级别：${actLevel}`;
      // 费用
      // copyText += `\n费用：${actPrice}`
      if (data.isBoyGirl == '1') {
        if (data.isVip == '1') {
          copyText += `\n费用：男会员 ￥${data.costBoyVip}   女会员 ￥${
            data.costGirlVip
          }`;
          copyText += `  男游客 ￥${data.cost}   女游客 ￥${data.costGirl}`;
        } else {
          copyText += `\n费用：男 ￥${data.cost}   女 ￥${data.costGirl}`;
        }
      } else {
        if (data.isVip == '1') {
          copyText += `\n费用：会员 ￥${data.costBoyVip}   游客 ￥${data.cost}`;
        } else {
          copyText += `\n费用：￥${data.cost}`;
        }
      }
      copyText += `${adminPhone}\n说明：可替补报名，替补报名失败，费用自动退回。\n已报名人员：${actAppoint}`;
      if (actHoubu.length > 0) {
        copyText += '\n候补人员：' + actHoubu;
      }
      copyText += '\n\n报名链接：' + h5Url;
      uni.setClipboardData({
        data: copyText,
        success(res) {
          // uni.getClipboardData({
          // 	success(res) {
          // 		console.log(res,'剪贴板的内容')
          // 	}
          // })
        }
      });
    },
    onSheetClose(e, type = 1) {
      if (type == 1) {
        this.actionSheetShow = false;
      } else {
        this.cancelSignSheetShow = false;
      }
    },
    showActionSheet() {
      this.actionSheetShow = true;
    },
    async getQrcodeImg() {
      const param = {
        page: 'pages/activity/detail/detail',
        scene: 'id=' + this.detailid,
        sideType: '1',
        width: 280
      };
      const res = await this.$api.getUnlimited(param);
      if (res && res.code == 200) {
        console.log(res, 'getUnlimited');
        this.qrcodeImg = res.data;
        this.formSubmit();
      }
    },
    //点击保存到相册
    baocun() {
      var that = this;
      uni.saveImageToPhotosAlbum({
        filePath: that.imagePath,
        success(res) {
          uni.showModal({
            content: '图片已保存到相册，赶紧晒一下吧~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定');
                /* 该隐藏的隐藏 */
                that.maskHidden = false;
              }
            },
            fail: function(res) {
              console.log(11111);
            }
          });
        }
      });
    },
    //点击生成海报
    formSubmit(e) {
      var that = this;
      this.maskHidden = false;
			uni.showToast({
			  title: '制作中...',
			  icon: 'loading',
			  duration: 3000
			});
      that.drawPoster().then((res)=>{
				setTimeout(function() {
				  uni.hideToast();
				  that.maskHidden = true;
				}, 1000);
				// 将图片保存到本地
				uni.saveImageToPhotosAlbum({
				  filePath: res,
				  success(res) {
				    uni.showModal({
				      content: '图片已保存到相册',
				      showCancel: false,
				      confirmText: '好的',
				      confirmColor: '#333',
				      success: function(res) {
				        if (res.confirm) {
				          /* 该隐藏的隐藏 */
				          that.maskHidden = false;
				        }
				      },
				      fail: function(res) {
				        console.log(11111);
				      }
				    });
				  }
				});
			})
    },
		drawSharePoster() {
			return new Promise((resolve, reject)=>{
				const limitRelName = function(str, len = 6) {
				  if (!str && typeof str != 'undefined') {
				    return '';
				  }
				  var num = 0;
				  var str1 = str;
				  var str = '';
				  for (var i = 0, lens = str1.length; i < lens; i++) {
				    num += str1.charCodeAt(i) > 255 ? 2 : 1;
				    if (num > len) {
				      return str + '…';
				    } else {
				      str = str1.substring(0, i + 1);
				    }
				  }
				  return str;
				};
				
				let that = this;
				let data = that.detailData;
				let actTimeArr = [data.startDate, data.endDate];
				let actTime =
					actTimeArr[0] == actTimeArr[1]
						? that.dateAddDay(actTimeArr[0])
						: that.dateAddDay(data.startDate) +
							' - ' +
							that.dateAddDay(data.endDate);
				actTime +=
					'  ' + data.startTime.substr(0, 5) + '-' + data.endTime.substr(0, 5);
				let actTimeFillArr = [];
				if (actTime.length > 28) {
					actTimeFillArr = actTime.split('  ');
				} else {
					actTimeFillArr.push(actTime);
				}
				let actAddressArr = [];
				if (that.jlbdata && that.jlbdata.name) {
					let jlbName = that.jlbdata.name;
					if (jlbName.length > 38) {
						actAddressArr = [
							jlbName.substr(0, 19),
							jlbName.substr(19, 19),
							jlbName.substr(38, 19)
						];
					} else if (jlbName.length > 19) {
						actAddressArr = [jlbName.substr(0, 19), jlbName.substr(19, 19)];
					} else {
						actAddressArr.push(jlbName);
					}
				}
				let mbh = 10; // 蓝色画布内文字Y坐标
				let [bw, bh] = [20, 30]; // 白色矩形内部文字坐标
				let lh = 30; // 白色矩形内部文字行高
				let numProw = 4; // 报名人员排列，一行4个
				let roundRectHeight = bh + 7 * 30;
				roundRectHeight += lh * (actTimeFillArr.length + actAddressArr.length);
				roundRectHeight += lh * 2 // “说明”占用两行
				if (data.clubMobile) {
					roundRectHeight += lh;
				}
				if (data.registrationCount > 0) {
					let l = that.appointList.filter((obj, idx) => {
						return obj.isBack == '0';
					}).length;
					roundRectHeight += Math.ceil(l / numProw) * (2 * lh) + lh;
				}
				if (data.registrationCount > data.maxNumber) {
					let l = that.appointList.filter((obj, idx) => {
						return obj.isBack == '1';
					}).length;
					roundRectHeight += Math.ceil(l / numProw) * (2 * lh) + lh;
				}
				if (data.location) {
					roundRectHeight += lh;
				}
				if (data.badminton) {
					roundRectHeight += lh;
				}
				if (data.isBoyGirl == '1' && data.isVip == '1') {
					roundRectHeight += lh;
				}
				// 计算整个画布高度
				that.canvasHeight =
					roundRectHeight + mbh + 10;
				let context = uni.createCanvasContext('mycanvas');
				context.setFillStyle('#2E87FF');
				context.fillRect(0, 0, 375, that.canvasHeight);
				// ----------------------白色矩形开始---------------------------
				that.fillRoundRect(
					context,
					10,
					mbh,
					355,
					roundRectHeight,
					13,
					'rgba(255,255,255,1)'
				);
				// context.restore()
				let [signUpD, signUpT] = data.registrationEnd
					.substr(0, 16)
					.split(' ');
				let signUpTime = `${that.dateAddDay(signUpD)}  ${signUpT}`;
				let actAddress = that.jlbdata.name;
				let actPersonNumber = `人数：${
					data.registrationCount > data.maxNumber
						? data.maxNumber +
							'/' +
							data.maxNumber +
							'  替补：' +
							(data.registrationCount - data.maxNumber)
						: data.registrationCount + '/' + data.maxNumber
				}`;
				let actLevel = '';
				if (
					data.levelStart == data.levelEnd &&
					data.girlLevelStart == data.girlLevelEnd
				) {
					actLevel += `男 L${data.levelStart}  女 L${data.girlLevelStart}`;
				} else {
					actLevel += `男 L${data.levelStart}-L${data.levelEnd}  女 L${
						data.girlLevelStart
					}-L${data.girlLevelEnd}`;
				}
				let actPrice = '';
				if (data.costGirl !== undefined && data.costGirl !== data.cost) {
					actPrice += `男￥${data.cost}  女￥${data.costGirl}`;
				} else {
					actPrice += `男￥${data.cost}  女￥${data.cost}`;
				}
				let [actAppoint, actAppointId] = ['', 1];
				let [actHoubu, actHoubuId] = ['', 1];
				that.appointList.forEach((item, index) => {
					if (item.isBack == '0') {
						actAppoint += `\n${actAppointId}. 【L${item.skillLevel}】${
							item.relName
						} (${item.sex == 1 ? '男' : '女'})`;
						actAppointId++;
					} else {
						actHoubu += `\n${actHoubuId}. 【L${item.skillLevel}】${
							item.relName
						} (${item.sex == 1 ? '男' : '女'})`;
						actHoubuId++;
					}
				});
				// 绘制白色矩形内部文字
				context.setFontSize(17);
				context.setFillStyle('#333333');
				context.setTextAlign('left');
				context.fillText('活动时间：', bw, bh);
				bh += lh;
				actTimeFillArr.forEach((item, index) => {
					context.fillText(item, bw, bh);
					bh += lh;
				});
				context.fillText('报名截止：', bw, bh);
				bh += lh;
				context.fillText(signUpTime, bw, bh);
				bh += lh;
				context.fillText('地点：', bw, bh);
				bh += lh;
				actAddressArr.forEach((item, index) => {
					context.fillText(item, bw, bh);
					bh += lh;
				});
				context.fillText('级别：' + actLevel, bw, bh);
				bh += lh;
				if (data.isBoyGirl == '1') {
					if (data.isVip == '1') {
						context.fillText(
							`费用：男会员 ￥${data.costBoyVip}   女会员 ￥${
								data.costGirlVip
							}`,
							bw,
							bh
						);
						bh += lh;
						context.fillText(
							`男游客 ￥${data.cost}   女游客 ￥${data.costGirl}`,
							bw + 51,
							bh
						);
						bh += lh;
					} else {
						context.fillText(
							`费用：男 ￥${data.cost}   女 ￥${data.costGirl}`,
							bw,
							bh
						);
						bh += lh;
					}
				} else {
					if (data.isVip == '1') {
						context.fillText(
							`费用：会员 ￥${data.costBoyVip}   游客 ￥${data.cost}`,
							bw,
							bh
						);
						bh += lh;
					} else {
						context.fillText(`费用：￥${data.cost}`, bw, bh);
						bh += lh;
					}
				}
				context.fillText(actPersonNumber, bw, bh);
				bh += lh;
				if (data.location) {
					context.fillText(
						'场地：' + that.strEllipsis(data.location, 15),
						bw,
						bh
					);
					bh += lh;
				}
				if (data.badminton) {
					context.fillText(
						'用球：' + that.strEllipsis(data.badminton, 15),
						bw,
						bh
					);
					bh += lh;
				}
				if (data.clubMobile) {
					context.fillText('管理员联系电话：' + data.clubMobile, bw, bh);
					bh += lh;
				}
				// “说明”
				context.fillText('说明：可替补报名，替补报名失败，费用自', bw, bh);
				bh += lh;
				if (data.registrationCount > 0) {
					context.setTextAlign('left');
					context.fillText('已报名人员：', bw, bh);
					bh += lh;
					let id = 0; // 符合条件的项重新排列对应的下标
					let lbw = bw + 80 / 2;
					that.appointList.forEach((item, index) => {
						context.setTextAlign('center');
						if (item.isBack == '0') {
							if (item.sex == 1) {
								context.setFillStyle('#2E87FF');
							} else {
								context.setFillStyle('#E14806');
							}
							context.setFontSize(17);
							context.fillText(
								limitRelName(item.relName),
								lbw + (id % numProw) * 80,
								bh
							);
							context.setFontSize(15);
							context.fillText(
								'级别L' + item.skillLevel || 1,
								lbw + (id % numProw) * 80,
								bh + 25
							);
							if ((id + 1) % numProw == 0) {
								bh += 60;
							}
							id++;
						}
					});
					bh += 60;
				}
				context.setFontSize(17);
				context.setFillStyle('#333333');
				if (data.registrationCount > data.maxNumber) {
					context.setTextAlign('left');
					context.fillText('候补人员：', bw, bh);
					bh += lh;
					let id = 0; // 符合条件的项重新排列对应的下标
					let lbw = bw + 80 / 2;
					that.appointList.forEach((item, index) => {
						context.setTextAlign('center');
						if (item.isBack == '1') {
							if (item.sex == 1) {
								context.setFillStyle('#2E87FF');
							} else {
								context.setFillStyle('#E14806');
							}
							context.setFontSize(17);
							context.fillText(
								limitRelName(item.relName),
								lbw + (id % numProw) * 80,
								bh
							);
							context.setFontSize(15);
							context.fillText(
								'级别L' + item.skillLevel || 1,
								lbw + (id % numProw) * 80,
								bh + 25
							);
							if ((id + 1) % numProw == 0) {
								bh += 60;
							}
							id++;
						}
					});
					bh += 60;
				}
				context.stroke();
				context.draw();
				//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
				setTimeout(function() {
				  uni.canvasToTempFilePath({
				    canvasId: 'mycanvas',
				    success: function(res) {
				      var tempFilePath = res.tempFilePath;
				      that.imagePath = tempFilePath;
							resolve(that.imagePath)
				    },
				    fail: function(res) {}
				  });
				}, 1000);
			})
		},
    drawPoster() {
			return new Promise((resolve, reject)=>{
				const limitRelName = function(str, len = 6) {
				  if (!str && typeof str != 'undefined') {
				    return '';
				  }
				  var num = 0;
				  var str1 = str;
				  var str = '';
				  for (var i = 0, lens = str1.length; i < lens; i++) {
				    num += str1.charCodeAt(i) > 255 ? 2 : 1;
				    if (num > len) {
				      return str + '…';
				    } else {
				      str = str1.substring(0, i + 1);
				    }
				  }
				  return str;
				};
				
				let that = this;
				let data = that.detailData;
				let title = data.title;
				let titleLineNumber = Math.ceil(title.length / 12);
				let actTimeArr = [data.startDate, data.endDate];
				let actTime =
					actTimeArr[0] == actTimeArr[1]
						? that.dateAddDay(actTimeArr[0])
						: that.dateAddDay(data.startDate) +
							' - ' +
							that.dateAddDay(data.endDate);
				actTime +=
					'  ' + data.startTime.substr(0, 5) + '-' + data.endTime.substr(0, 5);
				let actTimeFillArr = [];
				if (actTime.length > 28) {
					actTimeFillArr = actTime.split('  ');
				} else {
					actTimeFillArr.push(actTime);
				}
				let actAddressArr = [];
				if (that.jlbdata && that.jlbdata.name) {
					let jlbName = that.jlbdata.name;
					if (jlbName.length > 38) {
						actAddressArr = [
							jlbName.substr(0, 19),
							jlbName.substr(19, 19),
							jlbName.substr(38, 19)
						];
					} else if (jlbName.length > 19) {
						actAddressArr = [jlbName.substr(0, 19), jlbName.substr(19, 19)];
					} else {
						actAddressArr.push(jlbName);
					}
				}
				let qrcodeW = 160; // 小程序码宽高
				let mbh = 70; // 蓝色画布内文字Y坐标
				let [bw, bh] = [20, 40]; // 白色矩形内部文字坐标
				let lh = 30; // 白色矩形内部文字行高
				let numProw = 4; // 报名人员排列，一行4个
				let roundRectHeight = bh + 7 * 30;
				roundRectHeight += lh * (actTimeFillArr.length + actAddressArr.length);
				roundRectHeight += lh * 2 // “说明”占用两行
        if (data.clubContact) {
					roundRectHeight += lh;
				}
				if (data.registrationCount > 0) {
					let l = that.appointList.filter((obj, idx) => {
						return obj.isBack == '0';
					}).length;
					roundRectHeight += Math.ceil(l / numProw) * (2 * lh) + lh;
				}
				if (data.registrationCount > data.maxNumber) {
					let l = that.appointList.filter((obj, idx) => {
						return obj.isBack == '1';
					}).length;
					roundRectHeight += Math.ceil(l / numProw) * (2 * lh) + lh;
				}
				if (data.location) {
					roundRectHeight += lh;
				}
				if (data.badminton) {
					roundRectHeight += lh;
				}
				if (data.isBoyGirl == '1' && data.isVip == '1') {
					roundRectHeight += lh;
				}
				// 计算整个画布高度
				that.canvasHeight =
					roundRectHeight + mbh + 35 * titleLineNumber + qrcodeW + 100;
				let context = uni.createCanvasContext('mycanvas');
				context.setFillStyle('#2E87FF');
				context.fillRect(0, 0, 375, that.canvasHeight);
				// 绘制title部分
				context.setFontSize(30);
				context.setFillStyle('#FFF');
				context.setTextAlign('center');
				for (let i = 0; i < Math.ceil(title.length / 13); i++) {
					context.fillText(title.substr(i * 13, 13), 187.5, mbh, 350);
					mbh += 35;
				}
				context.stroke();
				// 绘制小程序码
				let buffer = uni.base64ToArrayBuffer(that.qrcodeImg.split(',')[1]);
				let fsm = uni.getFileSystemManager();
				let filePath = wx.env.USER_DATA_PATH + '/share_img.png';
				console.log(filePath);
				fsm.writeFile({
					filePath: filePath,
					data: buffer,
					encoding: 'binary',
					success() {
						context.drawImage(
							filePath,
							107.5,
							that.canvasHeight - 240,
							qrcodeW,
							qrcodeW
						);
						// 绘制小程序码提示语
						context.setFontSize(16);
						context.setFillStyle('#FFFFFF');
						context.setTextAlign('center');
						context.fillText(
							'长按识别二维码进行报名',
							187.5,
							that.canvasHeight - 50
						);
						context.stroke();
	
						// ----------------------白色矩形开始---------------------------
						that.fillRoundRect(
							context,
							10,
							mbh,
							355,
							roundRectHeight,
							13,
							'rgba(255,255,255,1)'
						);
						// context.restore()
						let [signUpD, signUpT] = data.registrationEnd
							.substr(0, 16)
							.split(' ');
						let signUpTime = `${that.dateAddDay(signUpD)}  ${signUpT}`;
						let actAddress = that.jlbdata.name;
						let actPersonNumber = `人数：${
							data.registrationCount > data.maxNumber
								? data.maxNumber +
									'/' +
									data.maxNumber +
									'  替补：' +
									(data.registrationCount - data.maxNumber)
								: data.registrationCount + '/' + data.maxNumber
						}`;
						let actLevel = '';
						if (
							data.levelStart == data.levelEnd &&
							data.girlLevelStart == data.girlLevelEnd
						) {
							actLevel += `男 L${data.levelStart}  女 L${data.girlLevelStart}`;
						} else {
							actLevel += `男 L${data.levelStart}-L${data.levelEnd}  女 L${
								data.girlLevelStart
							}-L${data.girlLevelEnd}`;
						}
						let actPrice = '';
						if (data.costGirl !== undefined && data.costGirl !== data.cost) {
							actPrice += `男￥${data.cost}  女￥${data.costGirl}`;
						} else {
							actPrice += `男￥${data.cost}  女￥${data.cost}`;
						}
						let [actAppoint, actAppointId] = ['', 1];
						let [actHoubu, actHoubuId] = ['', 1];
						that.appointList.forEach((item, index) => {
							if (item.isBack == '0') {
								 actAppoint += `\n${actAppointId}. 【L${item.playerSkillLevel}】${
									item.relName
								} (${item.sex == 1 ? '男' : '女'})`;
								actAppointId++;
							} else {
								actHoubu += `\n${actHoubuId}. 【L${item.playerSkillLevel}】${
									item.relName
								} (${item.sex == 1 ? '男' : '女'})`;
								actHoubuId++;
							}
						});
						// 绘制白色矩形内部文字
						context.setFontSize(17);
						context.setFillStyle('#333333');
						context.setTextAlign('left');
						context.fillText('活动时间：', bw, bh);
						bh += lh;
						actTimeFillArr.forEach((item, index) => {
							context.fillText(item, bw, bh);
							bh += lh;
						});
						context.fillText('报名截止：', bw, bh);
						bh += lh;
						context.fillText(signUpTime, bw, bh);
						bh += lh;
						context.fillText('地点：', bw, bh);
						bh += lh;
						actAddressArr.forEach((item, index) => {
							context.fillText(item, bw, bh);
							bh += lh;
						});
						// context.fillText(actAddress, bw, bh)
						// bh += lh
						if (data.location) {
							context.fillText(
								'场地：' + that.strEllipsis(data.location, 15),
								bw,
								bh
							);
							bh += lh;
						}
						if (data.badminton) {
							context.fillText(
								'用球：' + that.strEllipsis(data.badminton, 15),
								bw,
								bh
							);
							bh += lh;
						}
						context.fillText(actPersonNumber, bw, bh);
						bh += lh;
						context.fillText('级别：' + actLevel, bw, bh);
						bh += lh;
						if (data.isBoyGirl == '1') {
							if (data.isVip == '1') {
								context.fillText(
									`费用：男会员 ￥${data.costBoyVip}   女会员 ￥${
										data.costGirlVip
									}`,
									bw,
									bh
								);
								bh += lh;
								context.fillText(
									`男游客 ￥${data.cost}   女游客 ￥${data.costGirl}`,
									bw + 51,
									bh
								);
								bh += lh;
							} else {
								context.fillText(
									`费用：男 ￥${data.cost}   女 ￥${data.costGirl}`,
									bw,
									bh
								);
								bh += lh;
							}
						} else {
							if (data.isVip == '1') {
								context.fillText(
									`费用：会员 ￥${data.costBoyVip}   游客 ￥${data.cost}`,
									bw,
									bh
								);
								bh += lh;
							} else {
								context.fillText(`费用：￥${data.cost}`, bw, bh);
								bh += lh;
							}
						}
						if (data.clubContact) {
							context.fillText('管理员联系电话：' + data.clubContact, bw, bh);
							bh += lh;
						}
            // “说明”
            context.fillText('说明：可替补报名，替补报名失败，费用自', bw, bh);
            bh += lh;
            context.fillText('动退回。', bw + 51, bh);
            bh += lh;
						if (data.registrationCount > 0) {
							context.setTextAlign('left');
							context.fillText('已报名人员：', bw, bh);
							bh += lh;
							let id = 0; // 符合条件的项重新排列对应的下标
							let lbw = bw + 80 / 2;
							that.appointList.forEach((item, index) => {
								context.setTextAlign('center');
								if (item.isBack == '0') {
									if (item.sex == 1) {
										context.setFillStyle('#2E87FF');
									} else {
										context.setFillStyle('#E14806');
									}
									context.setFontSize(17);
									context.fillText(
										limitRelName(item.relName),
										lbw + (id % numProw) * 80,
										bh
									);
									context.setFontSize(15);
									context.fillText(
										'级别L' + item.playerSkillLevel || 1,
										lbw + (id % numProw) * 80,
										bh + 25
									);
									if ((id + 1) % numProw == 0) {
										bh += 60;
									}
									id++;
								}
							});
							bh += 60;
						}
						context.setFontSize(17);
						context.setFillStyle('#333333');
						if (data.registrationCount > data.maxNumber) {
							context.setTextAlign('left');
							context.fillText('候补人员：', bw, bh);
							bh += lh;
							let id = 0; // 符合条件的项重新排列对应的下标
							let lbw = bw + 80 / 2;
							that.appointList.forEach((item, index) => {
								context.setTextAlign('center');
								if (item.isBack == '1') {
									if (item.sex == 1) {
										context.setFillStyle('#2E87FF');
									} else {
										context.setFillStyle('#E14806');
									}
									context.setFontSize(17);
									context.fillText(
										limitRelName(item.relName),
										lbw + (id % numProw) * 80,
										bh
									);
									context.setFontSize(15);
									context.fillText(
										'级别L' + item.playerSkillLevel || 1,
										lbw + (id % numProw) * 80,
										bh + 25
									);
									if ((id + 1) % numProw == 0) {
										bh += 60;
									}
									id++;
								}
							});
							bh += 60;
						}
						context.stroke();
						context.draw();
				    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
				    setTimeout(function() {
				      uni.canvasToTempFilePath({
				        canvasId: 'mycanvas',
				        success: function(res) {
				          var tempFilePath = res.tempFilePath;
				          that.imagePath = tempFilePath;
				          //    that.canvasHidden = true
				          // uni.previewImage({
				          // 	current:0,
				          // 	urls:[that.imagePath],
				          // })
									console.log(that.imagePath,'----------------')
									resolve(that.imagePath)
				          
				        },
				        fail: function(res) {
				          console.log(res);
				        }
				      });
				    }, 1000);
				  }
				});
			})
    },
    getBytesLength(str) {
      let totalLength = 0;
      let charCode;
      for (var i = 0; i < str.length; i++) {
        charCode = str.charCodeAt(i);
        if (charCode < 0x007f) {
          totalLength++;
        } else if (0x0080 <= charCode && charCode <= 0x07ff) {
          totalLength += 2;
        } else if (0x0800 <= charCode && charCode <= 0xffff) {
          totalLength += 3;
        } else {
          totalLength += 4;
        }
      }
      return totalLength;
    },
    strEllipsis(str, len = 10) {
      if (typeof str == 'string' && str.length > len) {
        return str.substr(0, len) + '…';
      }
      return str;
    },
    async onShareAppMessage(res) {
			let _this = this
      this.setClipData();
			const p = await this.drawSharePoster()
			return {
			  title: this.detailData.title,
			  path: `/activity/detail/detail?id=${this.detailid}`,
				imageUrl: p
			}
    },
    // ---------------------以下为绘制圆角矩形相关---------------------------
    /**该方法用来绘制一个有填充色的圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param width:矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param fillColor:填充颜色
     **/
    fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
      console.log('=============================================');
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius, fillColor);
      cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
    },

    drawRoundRectPath(cxt, width, height, radius, fillColor) {
      cxt.setStrokeStyle(fillColor);

      cxt.beginPath(0);

      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

      //矩形下边线
      cxt.lineTo(radius, height);

      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

      //矩形左边线
      cxt.lineTo(0, radius);

      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

      //上边线
      cxt.lineTo(width - radius, 0);

      //右上角圆弧
      cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

      //右边线
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    },
    getUrlParam(str) {
      let arr = str.split('&');
      let obj = {};
      arr.forEach((item, index) => {
        let larr = item.split('=');
        obj[larr[0]] = larr[1];
      });
      return obj;
    }
  },
  watch: {
    accessToken(newVal) {
      //登录后获取会员状态
      if (newVal) {
        this.getHuiYuan();
        this.getCancelBtnShow();
      }
    }
  }
};
</script>

<style lang="scss">
// .fanhui{
// 	.xjx-back-box{
// 		&.black{
// 			background-color:#fff!important;
// 			border:none!important;
// 			// color:#333!important;
// 		}
// 	}
// }
.van-tabs__nav {
  height: 50px;
  line-height: 50px;

  .van-ellipsis {
    line-height: 50px;
  }

  .van-tab--active {
    color: $public-color-blue1;
  }
	
}
.van-dialog__header{
	padding-left: 10rpx!important;
	padding-right: 10rpx!important;
}
// .xjx-back-box{
// 		height: 64rpx;
// 		box-sizing: border-box;
// 		position: fixed;
// 		// top: 52rpx;
// 		left: 20rpx;
// 		z-index: 99;
// 		border-radius: 32rpx;
// 		&.white{
// 			background-color: rgba(0,0,0,.2);
// 			border: 1rpx solid rgba(255,255,255,.3);
// 		}
// 		&.black{
// 			background-color: rgba(245,245,245,.9);
// 			border: 1rpx solid rgba(212,212,212,.3);
// 		}
// 		.back-btn{
// 			width: 62rpx;
// 			height: 62rpx;
// 			color: white;
// 			line-height: 62rpx;
// 			text-align: center;
// 			image{
// 				width: 100%;
// 				height: 100%;
// 				vertical-align: middle;
// 			}
// 		}
// 	}
.biankuang {
  background-color: #fff;
  width: 100%;
  border-radius: 25rpx;
  box-shadow: 5rpx 5rpx 5rpx #ccc;
  padding: 29rpx 20rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 15rpx;
  .head {
    color: #333;
    font-size: 34rpx;
    display: flex;
    margin-bottom: 30rpx;
    line-height: 34rpx;
    justify-content: space-between;
    .ccc {
      font-size: 24rpx;
      color: #ccc;
    }
    .c99 {
      font-size: 28rpx;
      color: #999;
      line-height: 28rpx;
      height: 28rpx;
      display: flex;
      align-items: center;
      > text {
        margin-right: 15rpx;
      }
    }
  }
  .small {
    display: flex;
    width: 100%;
    .saishi {
      padding: 0 10rpx;
      background-color: $bg-color-cheng;
      color: $text-color-cheng;
      border-radius: 5rpx;
      margin-right: 10rpx;
      font-size: 24rpx;
    }
		.matchTip{
			padding: 0 10rpx;
			display: flex;
			background-color: $bg-color-cheng;
			color: $text-color-cheng;
			border-radius: 5rpx;
			margin-right: 10rpx;
			font-size: 24rpx;
			.match_title{
				font-size: 24rpx;
				padding-right: 5rpx!important;
			}
			.match_icon{
				width: 20rpx;
				padding: 0;
			}
		}
  }
}
.transi {
  position: fixed;
  z-index: 99;
  left: 0;
  top: -100rpx;
  opacity: 0;
  background: #ffffff;
  transition: all 0.2s linear;
  &.show {
    opacity: 1;
    top: 0;
  }
}
.classdetail {
  position: relative;
  padding-bottom: 120rpx;
  background-color: #f2f2f2;
  .headimg {
    width: 750rpx;
    height: 530rpx;
    .swiper_wrap {
      width: 100%;
      height: 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .paytime {
    width: 100%;
    .paystart {
      width: 100%;
      height: 97rpx;
      line-height: 97rpx;
      background-color: #f77350;
      padding-left: 30rpx;
      display: flex;
      justify-content: space-between;
      .r {
        display: flex;
        justify-content: flex-end;
        color: #fff;
        font-size: 26rpx;
        align-items: center;
        padding-right: 10rpx;
        > view {
          width: 50rpx;
          height: 41rpx;
          background-color: #db4821;
          border-radius: 5rpx;
          margin: 0 8rpx;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }
    .payend {
      width: 100%;
      height: 97rpx;
      line-height: 97rpx;
      display: flex;

      justify-content: space-between;
      padding-left: 30rpx;
      background-color: #fdb42e;
      align-items: center;
      padding-right: 10rpx;
      .r {
        font-size: 26rpx;
        color: #fff;
        display: flex;
        justify-content: flex-end;
        > view {
          width: 50rpx;
          height: 41rpx;
          background-color: #f0882c;
          border-radius: 5rpx;
          margin: 0 8rpx;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }
    .classPrice {
      margin-bottom: 20rpx;
      .flex {
        width: 100%;
        display: flex;
        // justify-content: flex-end;
        align-items: center;
        align-items: baseline;
      }
    }
    .ys {
      font-size: 24rpx;
      color: #fff;
      margin-right: 5rpx;
      line-height: 97rpx;
    }
    .yb {
      font-size: 46rpx;
      color: #fff;
      line-height: 97rpx;
      margin-right: 40rpx;
    }
    .ybs {
      font-size: 36rpx;
      color: #fdb42e;
      font-weight: bold;
      line-height: 50rpx;
      margin-right: 40rpx;
    }
  }
  .tab_wrap {
    width: 100%;
    background-color: #fff;
    .van-tabs {
      height: 90rpx;
    }
    .van-tabs__wrap {
      height: 90rpx;
    }
    .van-tabs__nav {
      height: 90rpx;
      line-height: 90rpx;
      border-bottom: 1px solid #e9e9e9;
      .van-ellipsis {
        line-height: 90rpx;
      }
      .van-tab--active {
        color: $public-color-blue1;
      }
    }
  }

  .scroll-view {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ccc_wrap {
    //内容区
    background-color: #f2f2f2;
    padding: 15rpx 10rpx;
    width: 750rpx;
    box-sizing: border-box;
    .classtit {
      display: flex;
      justify-content: space-between;
      height: auto;
      .l {
        width: 610rpx;
        height: 100%;
        .classPrice {
          margin-bottom: 10rpx;
          .flex {
            width: 100%;
            display: flex;
            // justify-content: flex-end;
            align-items: center;
            align-items: baseline;
          }
          .mar10 {
            margin-bottom: 10rpx;
          }
        }
				.cumulactive{
					width: 100%;
					display: flex;
					margin-bottom: 20rpx;
					.cumulactive_max{
						border: 1rpx solid #FEE5B8;
						border-radius: 30rpx;
						padding: 2rpx 10rpx;
						font-size: 24rpx;
						color: #fdb42e;
					}
					.cu_margin{
						margin-left: 10rpx;
					}
				}
        .ys {
          font-size: 24rpx;
          color: #fdb42e;
          margin-right: 5rpx;
          white-space: nowrap;
          word-wrap: break-word;
        }
        .yb {
          font-size: 46rpx;
          color: #fdb42e;
          font-weight: bold;
          line-height: 50rpx;
          margin-right: 40rpx;
          &:last-child {
            margin-right: 0;
          }
        }
        .yb:last-child {
          margin-right: 0;
        }
        .ybs {
          font-size: 36rpx;
          color: #fdb42e;
          font-weight: bold;
          line-height: 50rpx;
          margin-right: 40rpx;
        }
        .ybs:last-child {
          margin-right: 0;
        }
        text {
          // display:block;
          margin-bottom: 15rpx;
          font-size: 34rpx;
          line-height: 40rpx;
          color: #333;
        }
        .small {
          display: flex;
          width: 100%;
          .saishi {
            padding: 0 10rpx;
            background-color: $bg-color-cheng;
            color: $text-color-cheng;
            border-radius: 5rpx;
            margin-right: 10rpx;
            font-size: 24rpx;
						line-height: 1.4;
          }
					.matchTip{
						padding: 0 10rpx;
						display: flex;
						background-color: $bg-color-cheng;
						color: $text-color-cheng;
						border-radius: 5rpx;
						margin-right: 10rpx;
						font-size: 24rpx;
						.match_title{
							font-size: 24rpx;
							padding-right: 5rpx!important;
						}
						.match_icon{
							width: 20rpx;
							padding: 0;
						}
					}
        }
        .jibie {
          margin-bottom: 20rpx;
          .man {
            background-color: transparent !important;
            border: 1px solid #c8dbff;
            color: #2e87ff !important;
            line-height: 29rpx;
          }
          .woman {
            background-color: transparent !important;
            border: 1px solid #ffc8c3;
            color: #e14806;
            line-height: 29rpx;
          }
        }
      }
      .r {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        width: 100rpx;
				position: relative;
        .fenxiang {
          display: flex;
          text-align: right;
          align-items: center;
          justify-content: flex-end;
          white-space: nowrap;
          border: none;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #2e87ff;
          margin: 0;
          padding: 0;
          background: none;
          > text {
            display: block;
          }
        }
        .fenxiang::after {
          border: none;
        }
				.introduction{
					position: absolute;
					width: 155rpx;
					right: 0;
					bottom: 52rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					text {
						color: #999999;
						font-size: 26rpx;
						margin-left: 10rpx;
					}
				}
        .iconfx {
          width: 22rpx;
          height: 24rpx;
          background: url($public-baseImgUrl+'icon_fenxiang.png') no-repeat;
          background-size: 22rpx 24rpx;
          margin-right: 10rpx;
        }
        > view:first-child {
          width: 100%;
          font-size: 28rpx;
          text-align: right;
          color: $public-color-blue1;
        }
        > view:last-child {
          width: 100%;
          text-align: right;
          align-self: flex-end;
          font-size: 26rpx;
          color: #999;
        }
      }
    }
    .bm {
      padding-bottom: 0;
    }
    .bm_wrap {
      padding-bottom: 30rpx;
      border-bottom: 1px solid #e9e9e9;
    }
    .bmbtn {
      display: flex;
      height: 110rpx;
      align-items: center;
      >text {
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        color: #ccc;
      }
      .player-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          .image {
            position: relative;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            border:6rpx solid #fff;
            overflow: hidden;
            background: url($public-baseImgUrl+'icon_renshu.png') center no-repeat;
						background-size: 100% 100%;
            image {
              width: 100%;
              height: 100%;
            }
            &:first-of-type {
              left: 0;
            }
            &:nth-of-type(2) {
              left: -30rpx;
            }
            &:nth-of-type(3) {
              left: -60rpx;
            }
            &:nth-of-type(4) {
              left: -90rpx;
            }
            &:nth-of-type(5) {
              display: flex;
              &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: .15;
                z-index: 1;
              }
              &:after {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -20rpx;
                margin-top: -5rpx;
                content: '';
                width: 40rpx;
                height: 10rpx;
                background: url() no-repeat center;
                background-size: 100% 100%;
                z-index: 2;
              }
              justify-content: center;
              align-items: center;
              left: -120rpx;
            }
          }
        }
        .right {
          font-size: 28rpx;
          color: $public-color-blue1;
        }
      }
    }
    .bm_con {
      //活动报名
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l,
      .c,
      .r {
        width: 110rpx;
        display: flex;
        flex-wrap: wrap;
      }
      .l {
        position: relative;
      }
      .houbu_icon {
        padding: 0 10rpx;
        line-height: 35rpx;
        font-size: 24rpx;
        border-radius: 35rpx;
        background-color: #f77350;
        color: #fff;
        position: absolute;
        top: -10rpx;
        right: -40rpx;
        .icon {
          width: 23rpx;
          height: 11rpx;
          background: url('@/static/images/icon_jiao.png') no-repeat;
          background-size: 100% 100%;
          position: absolute;
          left: 30rpx;
          bottom: -8rpx;
        }
      }
      .jindu {
        width: 138rpx;
        height: 3rpx;
      }
			.jindu_match{
				width: 275rpx;
				height: 3rpx;
			}
      .img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50% 50%;
      }
      .bgcolorhui {
        background: url($public-baseImgUrl+'icon_bmren.png') no-repeat center
          center #f1f1f1;
        background-size: 54rpx 54rpx;
      }
      .bgcolorblue {
        background: url($public-baseImgUrl+'icon_bmren_bai.png') no-repeat
          center center $public-color-blue1;
        background-size: 54rpx 54rpx;
      }
      .num {
        font-size: 48rpx;
        line-height: 50rpx;
        color: #ccc;
        text-align: center;
        width: 100%;
        margin-bottom: 15rpx;
        padding-top: 10rpx;
      }
      .numhui {
        color: #ccc;
      }
      .numblue {
        color: $public-color-blue1;
      }
      .tit {
        font-size: 26rpx;
        line-height: 30rpx;
        color: #ccc;
        width: 100%;
        text-align: center;
        word-wrap: break-word;
      }
      .icon {
        width: 110rpx;
        height: 110rpx;
        background-color: #f1f1f1;
        border-radius: 50% 50%;
        text-align: center;
        color: #999;
        line-height: 110rpx;
        font-size: 30rpx;
      }
      .icon_blue {
        width: 110rpx;
        height: 110rpx;
        background-color: $public-color-blue1;
        color: #fff;
        border-radius: 50% 50%;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        // align-content: center;
        line-height: 30rpx;
        justify-content: center;
      }
    }
		.bm_con_match{
			padding: 0 70rpx;
		}
    .shuoming {
      .tit {
        font-size: 30rpx;
        color: #666;
        margin-bottom: 20rpx;
        word-wrap: break-word;
        text-align: justify;
      }
      .cd {
        margin-bottom: 20rpx;
        .tit1 {
          font-size: 30rpx;
          color: #999;
          word-wrap: break-word;
        }
        .tit2 {
          font-size: 30rpx;
          color: #333;
          word-wrap: break-word;
        }
      }
      .shorttime {
        margin-bottom: 45rpx;
        .time {
          font-size: 30rpx;
          color: #666;
          margin-bottom: 20rpx;
        }
        .times {
          display: flex;
          flex-wrap: wrap;
          view {
            font-size: 24rpx;
            color: #666;
            background-color: #f1f1f1;
            padding: 0 10rpx;
            height: 31rpx;
            line-height: 31rpx;
            border-radius: 5rpx;
            margin-right: 10rpx;
          }
        }
      }
      .langtimes {
        overflow-x: scroll;
        width: 100%;

        // width:750rpx;
        // box-sizing: border-box;
        .wrap {
          display: table;
          border: $public-border;
          border-radius: 15rpx;
        }
        .langtime_wrap {
          background-color: #fff;
          border-radius: 15rpx;
          padding-right: 25rpx;
          width: auto;
          display: table;
          border-collapse: collapse; //合并边框
          overflow-x: scroll;
          // 宽度不能设置，要完全显示可以用
          word-break: keep-all;
          // 设置不换行
          white-space: nowrap;
          background-color: #ffffff;
          .tr {
            display: table-row;
            margin-right: 25rpx;
            // background-color:#fff;
          }
          .head {
            height: 90rpx;
            border-bottom: $public-border;
            line-height: 90rpx;
            color: #999;
            font-size: 30rpx;
          }
          .th {
            display: table-cell;
            text-align: center;
            // border-right:$public-border;
            min-width: 200rpx;
            height: 90rpx;
            line-height: 90rpx;
          }
          .td {
            display: table-cell;
            text-align: center;
            min-width: 200rpx;
            height: 84rpx;
            line-height: 84rpx;
            // border-right: $public-border;
            > view {
              height: 84rpx;
              line-height: 84rpx;
              border-bottom: $public-border;
            }
          }
          .con {
            line-height: 84rpx;

            // border-bottom: $public-border;
          }
        }
      }
    }
    .julebu {
      .con {
        display: flex;
        .conimg {
          width: 150rpx;
          height: 150rpx;
          margin-bottom: 30rpx;
          margin-right: 20rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 15rpx;
          }
        }
        .rcon {
          display: flex;
          border-bottom: $public-border;
          //	padding-bottom:30rpx;
          justify-content: space-between;
          width: 512rpx;
        }
        .condata {
          width: 100%;
          height: 150rpx;
          margin-right: 20rpx;
          display: flex;
          flex-wrap: wrap;
					align-content: space-between;
          > text {
            font-size: 34rpx;
            color: #333;
            width: 100%;
            line-height: 40rpx;
          }
          .xing {
            color: #fdd549;
            font-size: 26rpx;
            > text {
              margin-left: 15rpx;
            }
          }
        }
        .dingwei {
          display: flex;
          flex-wrap: wrap;
          height: 150rpx;
          .top {
            width: 100%;
            font-size: 24rpx;
            color: #ccc;
            text-align: right;
          }
          .bot {
            width: 100%;
            height: 64rpx;
            text-align: right;
            align-self: flex-end;
            color: $public-color-blue1;
            font-size: 64rpx;
          }
        }
      }
      .dizhi {
        display: flex;
        justify-content: space-between;
        padding-top: 30rpx;
        .l {
          font-size: 36rpx;
          color: #ccc;
          width: 30rpx;
          margin-right: 8rpx;
          .icondw {
            width: 31rpx;
            height: 36rpx;
            background: url($public-baseImgUrl+'icon-location-grey.png')
              no-repeat;
            background-size: 31rpx 36rpx;
          }
        }
        .c {
          flex: 1 0 auto;
          max-width: 580rpx;
          margin-right: 30rpx;
          text {
            font-size: 34rpx;
            color: #333;
            display: block;
            line-height: 36rpx;
          }
          .ccc {
            padding-top: 15rpx;
            font-size: 26rpx;
            color: #999;
          }
          .c-top {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            .place-name {
            }
            .place-distance {
              font-size: 24rpx;
              color: #ccc;
            }
          }
        }
        .r {
          // width:30rpx;
          font-size: 28rpx;
          color: #999;
          display: flex;
          align-items: center;
          .top {
            width: 100%;
            font-size: 24rpx;
            color: #ccc;
            text-align: right;
          }
        }
      }
    }
    .jiaolian {
      .jl_con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .l {
          width: 122rpx;
          height: 122rpx;
          position: relative;
          border-radius: 50% 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          .icon_hg {
            width: 47rpx;
            height: 48rpx;
            position: absolute;
            right: -7rpx;
            top: -15rpx;
            background: url($public-baseImgUrl+'icon_huangguan.png') no-repeat;
            background-size: 100% 100%;
          }
          image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 50% 50%;
          }
          &.bor {
            border: 4rpx solid $public-color-yellow2;
          }
        }
        .c {
          width: 350rpx;
          .name {
            font-size: 34rpx;
            color: #333;
            margin-bottom: 15rpx;
            display: block;
          }
          .jlb {
            font-size: 26rpx;
            color: #999;
            margin-bottom: 15rpx;
            display: block;
          }
        }
        .r {
          .s {
            > view {
              background-color: #fff;
              border: 1rpx solid rgba(247, 115, 80, 0.2);
              line-height: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
    }
    .gmxz_con {
      font-size: 30rpx;
      line-height: 40rpx;
      > view {
        margin-bottom: 15rpx;
        text:first-child {
          color: #999;
        }
        text:last-child {
          color: #333;
        }
      }
			.flex-box{
				justify-content: flex-start;
				.label{
					flex: 1 0 auto;
				}
			}
    }
    .zhu {
      width: 100%;
      padding-right: 30rpx;
      box-sizing: border-box;
      text-align: right;
      color: $public-color-yellow1;
      font-size: 24rpx;
    }
    .pad_none {
      padding: 0 !important;
      overflow: hidden;
      .head {
        padding: 30rpx 20rpx 0;
        margin-bottom: 0 !important;
      }
      .like{
        margin-bottom: 20rpx !important;
      }
    }
    .mar_15{
      margin-bottom:15rpx;
    }
  }
  .kebiao {
    border-bottom: $public-border;
    .head {
      font-size: 30rpx;
      color: #333;
      padding-top: 40rpx;
      padding-left: 30rpx;
    }
  }
  .xiangou {
    display: flex;
    padding: 40rpx 30rpx;
    width: 100%;
    box-sizing: border-box;
    .left {
      width: 40rpx;
      margin-right: 15rpx;
    }
    .con1 {
      width: 550rpx;
      text {
        display: block;
      }
      text:first-child {
        font-size: 30rpx;
        color: #333;
      }
    }
    .tit {
      flex-basis: 100%;
      font-size: 24rpx;
      color: #ccc;
      word-wrap: break-word;
    }
  }
  .hui {
    width: 100%;
    height: 15rpx;
    background-color: #f2f2f2;
  }
  .hdrenshu {
    width: 100%;
    padding: 40rpx 0;
    .icon_ren {
      width: 68rpx;
      height: 68rpx;
      background: url($public-baseImgUrl+'icon_renshu.png') no-repeat;
      background-size: 100% 100%;
      margin: 0 auto 20rpx;
    }
    .shu {
      font-size: 48rpx;
      color: $public-color-yellow1;
      text-align: center;
      margin-bottom: 20rpx;
    }
    .tit {
      font-size: 30rpx;
      color: #999;
      text-align: center;
      word-wrap: break-word;
    }
  }
}
.footer-view{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #FFF;
	height: 160rpx;
	box-shadow: 0px 5px 5px 0px rgba(204, 204, 204, 0.5);
	&>view{
		position: absolute;
	}
	.team,.group{
		position: absolute;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: flex-start;
		width: 100rpx;
		top: -18rpx;
		overflow: hidden;
		// height: 130rpx;
		&.blue{
			.top{
				background-color: $bg-color-blue1;
			}
			.middle{
				color: $bg-color-blue1;
			}
			.bottom{
				background-color: $bg-color-blue1;
				color: #FFF;
			}
		}
		.top{
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			border-radius: 50%;
			font-size: 32rpx;
			color: #FEFEFF;
			background-color: #CCCCCC;
		}
		.middle{
			color: #CCCCCC;
			font-weight: bold;
		}
		.bottom{
			border-radius: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			width: 100%;
			text-align: center;
			color: #A5A5A5;
			background-color: #F2F2F2;
			font-size: 24rpx;
		}
	}
	.team-only{
		position: absolute;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: flex-start;
		width: 100rpx;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 18rpx;
		overflow: hidden;
		// height: 130rpx;
		&.blue{
			.middle{
				color: $bg-color-blue1;
			}
			.bottom{
				background-color: $bg-color-blue1;
				color: #FFF;
			}
		}
		.middle{
			color: #CCCCCC;
			font-weight: bold;
		}
		.bottom{
			border-radius: 36rpx;
			height: 36rpx;
			line-height: 36rpx;
			width: 100%;
			text-align: center;
			color: #A5A5A5;
			background-color: #F2F2F2;
			font-size: 24rpx;
		}
	}
	.team{
		left: 40rpx;
		
	}
	.group{
		left: 50%;
		transform: translateX(-50%);
	}
	.score{
		right: 30rpx;
		top: -63rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		background-color: #CCCCCC;
		box-shadow: 0px 10px 35px 0px rgba(153, 153, 153, 0.5);
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
		font-weight: bolder;
		&.blue{
			background: $bg-color-blue1;
			box-shadow: 0px 10px 35px 0px rgba(46, 135, 255, 0.5);
		}
		view{
			line-height: 36rpx;
			color: #FFF;
		}
	}
}
.detail_btnwrap {
  border-top: 1px solid #f2f2f2;
  background-color: #fff;
  width: 750rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  // align-items: center;
  // align-items:baseline;
  box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
	.btn-box{
		padding: 15rpx 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.jg {
		  font-size: 24rpx;
		  color: #999;
		  line-height: 68rpx;
		}
		.ys {
		  font-size: 24rpx;
		  color: #fdb42e;
		  margin-right: 5rpx;
		  line-height: 68rpx;
		}
		.yb {
		  font-size: 42rpx;
		  color: #fdb42e;
		  margin-right: 30rpx;
		  line-height: 68rpx;
		}
		.jijiang {
		  width: 238rpx;
		  height: 68rpx;
		  background: url($public-baseImgUrl+'btn_jijiang.png') no-repeat;
		  background-size: 238rpx 68rpx;
		  color: #fff;
		  line-height: 68rpx;
		  text-align: center;
		}
		.cancel-sign-btn {
		  width: 243rpx;
		  height: 78rpx;
		  line-height: 74rpx;
		  text-align: center;
		  border-radius: 39px;
		  border: 2rpx solid #e9e9e9;
		  font-size: 32rpx;
		  color: #999;
		  margin-right: 20rpx;
		}
		.jieshu {
		  width: 238rpx;
		  height: 68rpx;
		  background: url('@/static/images/classend.png') no-repeat;
		  background-size: 238rpx 68rpx;
		  color: #fff;
		  line-height: 68rpx;
		  text-align: center;
		}
		.houbu_icon {
		  padding: 0 10rpx;
		  line-height: 35rpx;
		  font-size: 24rpx;
		  border-radius: 35rpx;
		  background-color: #f77350;
		  color: #fff;
		  position: absolute;
		  top: -23rpx;
		  right: 40rpx;
		  .icon {
		    width: 23rpx;
		    height: 11rpx;
		    background: url('@/static/images/icon_jiao.png') no-repeat;
		    background-size: 100% 100%;
		    position: absolute;
		    left: 40rpx;
		    bottom: -10rpx;
		  }
		}
		.buy-btn{
			width: 243rpx;
			height: 78rpx;
			background-color: #2E87FF;
			border-radius: 39rpx;
			color: white;
			font-size: 32rpx;
			line-height: 78rpx;
			margin-right: 10rpx;
			&.orange-btn{
				background-color: #F77350!important;
			}
		}
	}
}
.hypopup {
	  padding: 40rpx 0 30rpx;
	  .tit {
	    font-size: 36rpx;
	    color: #333;
	    display: block;
	    text-align: center;
	    margin-bottom: 30rpx;
	  }
		.content{
			padding: 0 50rpx;
			.levelTip{
				padding: 20rpx 30rpx;
				background: #EEF5FE;
				font-size: 26rpx;
				color: #999999;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
			}
			.col666 {
			  font-size: 28rpx;
			  color: #666;
			  margin-bottom: 16rpx;
			  display: block;
			}
			.col999 {
			  font-size: 26rpx;
			  color: #999;
			  line-height: 40rpx;
			}
			.flex {
			  display: flex;
				.left-label{
					min-width: 140rpx;
				}
			}
			margin-bottom: 60rpx;
		}
	}
	.hypopup_match{
	  padding: 40rpx 0 30rpx;
	  .tit {
	    font-size: 36rpx;
	    color: #333;
	    display: block;
	    text-align: center;
	    margin-bottom: 30rpx;
	  }
		.content{
			padding: 0 50rpx;
			height: 880rpx;
			overflow-y: scroll;
			.col666 {
			  font-size: 28rpx;
			  color: #666;
			  margin-bottom: 16rpx;
			  display: block;
			}
			.col999 {
			  font-size: 26rpx;
			  color: #999;
			  line-height: 40rpx;
			}
			.flex {
			  display: flex;
				.left-label{
					min-width: 140rpx;
				}
			}
			// margin-bottom: 40rpx;
		}
		.matchKnow{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: absolute;
			bottom: 50rpx;
			>view{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: $bg-color-blue1;
				color: #FFFFFF;
				border-radius: 40rpx;
				box-shadow: 0 0 20rpx 20rpx #fff;
			}
			
		}
	}
.btn-noevents{
	pointer-events: none;
}
.uni-navbar--border {
  border-bottom: transparent!important;
}
</style>
